Shulou(Shulou.com)06/02 Report--

This article will explain in detail which is the default routing mode in vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The default route pattern in vue is the "hash" mode, which uses the hash value of URL as the route, simulates a complete URL and supports all browsers. The principle behind the hash pattern is the onhashchange event, which you can listen to on the window object.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The default route in vue is hash mode, which can be done by pure front end.

Hash: use the hash value of URL as the route. All browsers are supported.

The principle behind the hash pattern is the onhashchange event, which you can listen to 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 font color of the page by changing the hash, which is useless, but explains the principle to some extent.

More importantly, because the url of hash changes will be recorded by the browser, you will find that the browser can be used forward and backward, and when you click back, the font color of the page will also change. In this way, although the browser did not request a server, the page status was associated with URL one by one, and later people gave it a domineering name called front-end routing, which became standard for single-page applications.

Let's write a simple method to test it.

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

And the forward and backward pages of the browser can be changed.

NetEyun music, Baidu network disk uses hash routing, it looks like this:

Http://music.163.com/#/friendhttps://pan.baidu.com/disk/home#list/vmode=list

The other two modes of vue routing:

History: since HTML5 History API and server configuration. Refer to the HTML5 History mode in the official website

Abstract: all javascript operating modes are supported. If an API without a browser is found, the route is automatically forced into this mode.

History routing

With the advent of history api, the front-end routing began to evolve. In front of hashchange, 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.

(1) switch historical status

Including back, forward, go three methods, corresponding to the browser forward, backward, jump operation, some students said, (Google) browser only forward and backward, not jump, well, in the forward and backward long mouse press, will show all the history of the current window, so that you can jump (perhaps called jump is more appropriate):

History.go (- 2); / / back twice history.go (2); / / forward twice history.back (); / / back hsitory.forward (); / / forward

(2) modify the historical status

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 page state in the state object through pushstate, and when the url of the page changes back to the url, you can get the state object through event.state, so you can restore the page state, where the page state is the page font color, in fact, the position of the scroll bar, reading progress, the switch of the components of these page states can be stored in state.

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

Not afraid to move forward, not afraid to go back, just afraid to refresh, f5, (if the backend is not prepared), because the refresh is actually to request the server.

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

This is the end of the article on "which is the default routing pattern in vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.