hash and history modes that distinguish vue router

1. Concepts

In order to build SPA (single page application), it is necessary to introduce a front-end routing system, which is the significance of Vue-Router.

The core of front-end routing is to change the view without making requests to the back-end.

To achieve this goal, browsers currently provide the following two kinds of support:

1. hash-That is, the # symbol in the address bar URL (this hash is not a hash operation in cryptography).

For example, this URL: http://www. abc. com/#/hello, and the value of hash is #/hello.
Its feature is that although hash appears in URL, it will not be included in HTTP request, which has no effect on the back end at all, so changing hash will not reload the page.

2. history-Leverages the new pushState () and replaceState () methods in HTML5 History Interface.

These two methods are applied to the history stack of the browser. Based on the existing back, forward and go, they provide the function of modifying the history.
Only when they make modifications, the browser does not immediately send a request to the backend, although the current URL is changed.

2. hash mode

The principle behind the hash pattern is the onhashchange event, which you can listen for on an window object:

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

This paragraph can change the font color when hash changes.

hash changes url will be recorded by the browser, so you will find that the browser can use both forward and backward, and when you click Back, the font color of the page will also change.

In this way, although no request is sent to the back end, the page status is associated with url, which is the front-end routing.

3. history mode

With the arrival of history api, the front-end routing began to evolve. In the front onhashchange, you can only change the url fragment after #, while history api gives the front-end complete freedom.

history api can be divided into two parts, switching and modification.

Switching history state includes three methods: back, forward and go, which correspond to the forward, backward and jump operations of the browser.

pushState and replaceState are used to modify the history status. These two methods receive three parameters: stateObj, title and url

history.pushState({color:'red'}, 'red', 'red')
history.back();
setTimeout(function(){
 history.forward();
 },0)
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
   document.body.style.color = 'red';
  }
}

The state of the page is saved in the state object through pushstate. When the url of the page changes back to this url, the 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, components of the switch of these page states can be stored in state.

4. Problems with the history model

With history api, we lost the ugly #, but it also has a problem: not afraid of going forward, not afraid of going back, but afraid of refreshing, f5 (if the back end is not prepared), because refreshing actually requests the server.

In hash mode, the front-end route modifies the information in #, and the browser requests it without it, so there is no problem. However, under history, you are free to modify path. When refreshing, if there is no corresponding response or resource in the server, a 404 will be swiped out.

So, you need to add a candidate resource on the server that covers all situations: If URL does not match any static resources, you should return to the same index. html page, which is the page on which your app depends.

If nginx is used, the backend configuration is as follows:

location / {
 try_files $uri $uri/ /index.html;
}

These are the details of the hash and history modes that distinguish vue-router. For more information about vue-router, hash and history modes, please pay attention to other related articles on this site!