The difference between hash and history mode of routing

The difference between hash and history mode of routing

Vue-Router has two modes: hash mode and history mode. The default routing mode is hash mode.

1. hash mode

1.1 Introduction

The hash mode is the default mode in development, and its URL has a #;

For example: http://www.abc.com/#/vue, its hash value is ** #/vue**.

1.2 Features

• The hash value will appear in the URL, but will not appear in the HTTP request, and has no effect on the backend at all. So changing the hash value will not reload the page.
• The browser support of this mode is very good, and the lower version of IE browser also supports this mode.
• Hash routing is called front-end routing and has become the standard configuration of SPA (Single Page Application).

1.3 Principle! ! !

The main principle of the hash mode is the onhashchange() event

benefit:

1. When the hash value of the page changes, the window can monitor the change of the event without making a request to the backend, and load the corresponding code according to the rules

2. The URL corresponding to the change of the hash value will be recorded by the browser, so that the browser can realize the forward and backward of the page

3. Although there is no request to the backend server, the hash value of the page is associated with the corresponding URL.

 // js中有一个事件hashchange
window.onhashchange = function() {
    
    
    // 可以获取到app的data值，也可以设置值
    // console.log(app.currentCom)
    // 获取锚点值
    let curhash = location.hash.slice(1)
    console.log(curhash)
    switch (curhash) {
    
    
        case '/login':
            app.currentCom = 'login'
            break
        case '/reg':
            app.currentCom = 'reg'
            break
        case '/index':
            app.currentCom = 'index'
            break
    }
}

2. History mode

2.1 Introduction

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

2.2 Features

• When using history mode, the URL looks like this: http://abc.com/user/id. It looks better than hash mode.

• The history mode requires background configuration support. If the background is not configured correctly, 404 will be returned when accessing.

• API: The history api can be divided into two parts, switching history state and modifying history state :

  • Modify history state:

  • Including the newly added ** pushState()** and replaceState()methods in the HTML5 History Interface, these two methods are applied to the browser's history stack and provide the function of modifying the history . It's just that when they make a modification, although the url is modified, the browser does not immediately send a request to the backend. If you want to achieve the effect of changing the url without refreshing the page , you need to use these two APIs on the front end.

  • Toggle history state:

  • Including forward()、back()、go()three methods, corresponding to the browser's forward, backward, and jump operations.

  • Although history mode discards the ugly #. However, it also has its own shortcomings, that is, when the page is refreshed, if there is no corresponding route or resource, 404 will be displayed.

  • If you want to switch to history mode, you need to configure the following (the backend should also be configured)

    const router = new VueRouter({
    	mode:'history',
    	routes:[...]
    })
    

3. Comparison of two modes

1. Compared with directly modifying hash, calling history.pushState() has the following advantages: the new URL set by pushState() can be any URL with the same source as the current URL; while hash can only modify the part after #, so it can only be set with The current URL is the same as the URL of the document;
2. The new URL set by pushState() can be exactly the same as the current URL, which will also add the record to the stack; while the new value set by hash must be different from the original one to trigger the action to add the record to the stack;
3. pushState() can add any type of data to the record through the stateObject parameter; while hash can only add short strings;
4. pushState() can additionally set the title attribute for subsequent use.
5. In hash mode, only the url before the hash symbol will be included in the request, and if the backend does not fully cover the route, it will not return a 404 error;
6. In history mode, the url of the front end must be the same as the url that actually initiates the request to the back end. If there is no correct route processing, a 404 error will be returned.
7. Both the hash mode and the history mode have their own advantages and disadvantages, and they should be used selectively according to the actual situation.