How many vue-router routing modes are there?

Vue-router has three routing modes: hash, history, abstract. The corresponding source code is as follows:

switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV ! == 'production') { assert(false, `invalid mode: ${mode}`) } }Copy the code

  • Hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api;

    How hash works:

    • ,URL 中 hash The value is just a state on the client side, meaning that when a request is made to the server, the hash part is not sent;

Changes to the hash value add a record to the browser’s access history. So we can switch the hash through the browser’s back and forward buttons; You can use the a tag and set the href attribute. When the user clicks on the tag, the HASH value of the URL will change. Or use JavaScript to assign loaction.hash to change the HASH value of the URL. We can use the HashChange event to listen for changes in the hash value to jump (render) the page.

  • History: Relies on the HTML5 History API and server configuration.

    Principle of History:

    The history routing pattern is implemented based on the following features:

    • pushState 和 repalceStatetwoAPITo operate the implementation URLThe change of the;
    • We can usepopstateEvent to listenurlTo jump to the page (rendering);
    • history.pushState() 或 history.replaceState()Not triggerpopstate Event, at which point we need to manually trigger the page jump (render).

  • Support all JavaScript runtime environments, such as node.js server side. If the browser API is not found, routing automatically forces the mode into this mode.