Two modes of vue-route: hash mode and history mode

In order to build SPA , vue introduces the front-end routing system vue-router.
vue-route has two modes: history模式和hash模式.

1. Hash mode (vue-router default hash mode)

behind the hash pattern 原理是onhashchange事件.

window.onhashchange=function(){
 let hash=location.hash.slice(1);
 document.body.style.color=hash;
}

( localtionIt is a built-in object for managing the address bar in js, and it is windowa part of the object. It can be window.localtionaccessed through the detailed introduction in w3cshool. )
Since hashthe changed url will be recorded by the browser, the browser can be used forward and backward. Although the browser does not ask the server, the page status is associated with the url . Later, people called it front-end routing , and it became standard for single-page applications.

For example http://www.abc.com/#/index, the hash value is #/index. hash模式的特点The fact that the hash appears in the url, but will not be included HTTP请求中, has no effect on the backend, and will not reload the page .

2.history mode

The history mode takes advantage of HTML5 History Interfacethe new pushState()and replaceState()methods in . MDN related introduction (requires specific browser support). These two methods are applied to the browser's history stack, providing the ability to modify the history. It's just that when they make a modification, the browser doesn't send a request to the backend immediately, although the url is modified.
When used history模式, urls behave like normal urls, i.e. http://abc.com/user/idlook better than hash patterns. Special attention, history模式需要后台配置支持. If the background is not properly configured, 404 will be returned when accessing.
Through the history api, we discard the ugly #, but 有一个缺点when refreshing, if there is no corresponding corresponding or resource in the server, a 404 will be refreshed every minute (refreshing requires requesting the server). So the history mode is not afraid of going forward, not afraid of going backward, but afraid of refreshing.

3. Comparison of hash mode and history mode

• pushState()The new url can be set to any url with the same origin as the current url** ; hash can only modify #the latter part, and only the url of the current url and the document** can be set.
• pushState()The new url set can be the same as the current url, which will also add the record to the stack; hasha url different from the current url must be set to trigger the action to add the record to the stack.
• pushState()Any type of data can be added to the record through stateObjectparameters ; only short strings can be added .hash
• pushState()Additional titleproperties can be set for subsequent use.

However, hash模式也有比history模式优势的地方.

• hashIn mode, only hashthe url before the symbol will be included in the request. If the backend does not fully cover the route, it will not return a 404 error.
• historyIn mode, the url of the front end must be the same as the url that actually initiates the request to the back end . For example http://abc.com/user/id, if the back end does not have user/idthe correct route processing, it will return a 404 error.
  Official documentation of history mode

4. Application scenarios

For the general Vue+Vue-router+Webpack+XXXWeb development scenario of Form 1, historyyou can use the mode, and the back-end is used Apach或Nginxfor simple configuration of routing, and at the same time, it is supported by the 404 page of front-end routing.