Analysis on the difference between hash and history modes in vue-router

This article shares with you an analysis of the differences between hash and history modes in vue-router. The content is very good. Friends in need can refer to it. I hope it can help everyone.

As we all know, vue-router has two modes, hash mode and history mode. Let’s talk about the difference between the two.

hash mode

The principle behind hash mode is the onhashchange event, which can be monitored on the window object:

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

The above code can change the page font color by changing the hash. Although it is useless, it illustrates the principle to a certain extent.

The more critical point is that because the URL that hash changes will be recorded by the browser, you will find that the browser's forward and backward can be used, and when you click back, the page font color will also change. Variety. In this way, although the browser did not request the server, the page status was associated with the URL one by one. Later, people gave it a domineering name called front-end routing, and it became the standard configuration of single-page applications.

NetEase Cloud Music and Baidu Netdisk use hash routing, which looks like this:
http://music.163.com/#/friend

https://pan.baidu.com/disk/home#list/vmode=list

history routing

With the arrival of history api, front-end routing began to evolve For the previous hashchange, you can only change the url fragment behind #, while the history api gives the front-end complete freedom

history api can be divided into two For most of the switching and modification, refer to MDN

Switching historical status

Includes three methods: back, forward, and go, which correspond to the browser's forward, backward, and jump In terms of operation, some students said that the (Google) browser only has forward and backward, and there is no jump. Well, if you press and hold the mouse on the forward and backward buttons, the history of all current windows will appear, so you can jump (maybe it is better to call it jump). ):

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

Modify historical state

Includes two methods, pushState and replaceState, which 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();

Save the state of the page in the state object through pushstate. When the url of the page changes back to this url , this state object can be obtained through event.state, so that the page state can be restored. The page state here is the page font color. In fact, the position of the scroll bar, reading progress, and component switches can all be stored in state. inside.

What are you afraid of in history mode

Through the history api, we lost the ugly #, but it also has a problem:

Not afraid of moving forward, not afraid of going back , I am afraid of refreshing, f5, (if the backend is not prepared), because refreshing is a real request to the server, not virtual.

In hash mode, the front-end routing modifies the information in #, but the browser does not play with it when requesting, so there is no problem. But in history, you can freely modify the path. When refreshing, if there is no corresponding response or resource in the server, a 404 will be displayed every minute.

So, if you want to build a single-page blog on github.io, you should choose hash mode.

Related recommendations:

How to refresh tokens in vue

SFC and Specific analysis of vue-loader

The above is the detailed content of Analysis on the difference between hash and history modes in vue-router. For more information, please follow other related articles on the PHP Chinese website!