SoFunction
Updated on 2025-04-12

The difference and description of the hash and history patterns of routing

Preface

To buildSPA (single page application)That is, the overall page is not refreshed, and the changes in the address bar can be used to realize the switching of single pages and other functions.

Vue-Router Two modes are used to implement:hash modeandhistory mode. The default routing mode is hash mode.

Note:hashMode andhistorymodelAll belong toThe browser's own characteristics, Vue-Router only takes advantage of these two features

To realize the association between front-end routing and pages.

hashMode andhistorymodelThe most intuitive difference is ----hashroutingWith # number，historyroutingNo # number。

hash mode

The hash pattern is the default pattern in development. Its URL takes a #, for example: /#/vue, itsThe hash value is #/vue。

Features:

  • When the hash value in the URL changes, the browser will not send an http request to the backend;
  • The page will not reload

This mode has a good browser support, and lower versions of IE browsers also support this mode.

The principle of hash mode

By monitoringhashChange eventPositioning pages and rendering different contents;

 = function(event){// When clicking the browser forward and back button, it will be triggered    (,);
    let hash = (1);
     = hash;
}

The advantage of using the onhashchange() event is that when the hash value of the page changes, there is no need to initiate a request to the backend, window can listen to the event changes and load the corresponding code according to the rules.

In addition, the URL corresponding to the hash value changes will be recorded by the browser, so that the browser can realize the forward and backward page.

Although the backend server is not requested, the hash value of the page is associated with the corresponding URL.

history mode

There is no # in the URL of the history mode. It uses the traditional routing and distribution model, that is, when the user enters a URL, the server will receive the request, parse the URL, and then perform corresponding logical processing.

It passesHTML5 History APIProvidedmethodormethod, listen for popstate events,Need common support from the client and server。

pushState() and replaceState() methods, these two methods are applied to the browser's history stack, providing the function of modifying history. It's just that when they make changes, although the url is modified, the browser will not send a request to the backend immediately.

Switch historical status:include forward()、 back()、 go()Three methods: corresponding to the browser's forward, backward, and jump operations

Note:

  • When refreshing the page in history mode, requesting the backend
  • If the backend does not have a corresponding route or resource, 404 will appear

This is the front-end configuration

export default new Router({
    mode: 'history',
    // mode: 'hash', //Default hash mode    routes
})

Summarize

1、The hash mode has an ugly number with #, and the history mode is more elegant;

2、The new URL set by pushState can be any URL with the same origin as the current URL; and hash can only modify the part after #, so it can only set the URL with the same document as the current URL;

3、The new URL set by pushState can be exactly the same as the current URL, which will also add the record to the stack; and the new value set by hash must be different from the original before the record will be added to the stack;

4、pushState can add any type of data to the record through stateObject; while hash can only add short strings;

5、pushState can additionally set the title attribute for subsequent use;

6、When refreshing the page in history mode, a 404 will appear if the backend does not have a corresponding route or resource.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.