The difference between hash mode and history mode in vue-router

vue-router has two modes

• hash mode
• History mode
  

1. Single Page Application

Single Page Application

1. There is only one HTML file, all the contents of the entire website are in this HTML, and it is processed by JS

2. Not only is there no refresh in page interaction, but even page jumps are not refreshed. To achieve single-page application ==> front-end and back-end separation + front-end routing. (update the view without re-requesting the page)

Front-end routing

It is actually very simple to implement. It is to match different URL paths, parse them, load different components, and then dynamically render the regional HTML content.

advantage

Good interactive experience, users do not need to refresh the page, the page displays smoothly, good front-end and back-end work separation mode, reduce server pressure,

shortcoming

Not good for SEO, the initial loading takes a long time

2. Hash mode

Principle: It is the onhashchange event, which can be listened to on the window object

The default mode of vue-router is hash mode

1. Use the URL hash to simulate a complete URL

2. When the URL changes, the page will not reload, that is, a single-page application

2. When the hash after # changes, the browser will not send a request to the server. If the browser does not send a request, the page will not be refreshed, and the hasChange event will be triggered. By monitoring the changes in the hash value, the operation of updating part of the page content can be realized.

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

For hash mode, a hashHistory object is created. When accessing different routes, two things happen:

1. HashHistory.push() adds the new route to the top of the browser's access history stack.

2. HasHistory.replace() replaces the route at the top of the current stack

3.History mode

With the advent of the history api, front-end routing has evolved. In the previous hashchange, you can only change the URL fragment after #, while the history api gives the front-end complete freedom.

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

3.1 Switching history status

Including back, forward, go three methods corresponding to the browser's forward, backward, jump operations. For example: (Google) browser only has forward and back, no jump. Well, long press the mouse on the forward and backward buttons, and the history of all current windows will appear, so that you can jump (maybe it is more appropriate to call it jump):

history.go(-2);//Back twicehistory.go(2);//Forward twicehistory.back(); //Backhistory.forward(); //Forward

3.2 Modify the history status

Includes two methods: pushState and replaceState

These two methods receive three parameters: stateObj, title, url

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

history.back();

history.forward();

step

1. Save the state of the page in the state object through pushstate

2. When the page URL changes back to this URL, you can get the state object through event.state

3. So that the page status can be restored

4. The page status here is the page font color. In fact, the page status of the scroll bar position, reading progress, and component switches can all be stored in the state.

3.3 What is the history mode afraid of?

The difference between hash and history

history mode

1. Through the history API, we get rid of the ugly #, but it also has a problem

2. Don’t be afraid of moving forward or backward, just be afraid of refreshing, f5

——The history mode will modify the URL to be the same as the URL of the normal request backend. If the backend is not configured with the corresponding /user/id routing processing, a 404 error will be returned

——So this implementation requires the support of the server, and all routes need to be redirected to the root page.

In ash mode

1. In the previous hashchange, you can only change the URL segment after #. The new URL set by pushState can be any URL with the same origin as the current URL.

2. The front-end routing modifies the information in #, and the browser does not use it when requesting, so there is no problem. However, under history, you can modify the path freely. When refreshing, if there is no corresponding response or resource in the server, a 404 will be displayed in minutes.

Summarize

This concludes this article about the differences between hash mode and history mode in vue-router. For more information about the differences between vue-router modes, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!