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

Most people do not understand the knowledge points of this article "what are the differences between the two modes of vue-router", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what are the differences between the two modes of vue-router?"

Differences: 1, the url of history does not have a "#" number, while hash has; 3, the url modified by history can be any url in the same domain, while hash is the url;3 of the same document, the same url,history will be triggered and added to the browser history stack, but hash will not be triggered.

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

Two modes of vue-router

1.hash mode

Vue-router defaults to hash' [h subscription] 'mode, which uses URL's hash to simulate a complete URL, so when the URL changes, the page does not reload, that is, a single page application. When the hash changes after #, it will not cause the browser to issue a request to the server, and the browser will not refresh the page if it does not make a request, and the hasChange event will be triggered to update part of the page by listening for changes in the hash value.

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

HashHistory.push () adds a new route to the top of the browser's access history, and HasHistory.replace () replaces the route at the top of the current stack.

2.history mode

Because of the release of the HTML5 standard, there are two more API,pushState () and replaceState (). Through these two API

(1) the url address can be changed without sending a request.

(2) you can not only read the history stack, but also modify the browser history stack.

In addition, there is popState (), which triggers the popState event when the browser jumps to a new state.

Add / modify Historical statu

Includes two methods of pushState,replaceState, which receive three parameters: stateObj,title,url

/ / add history entries window.history.pushState (stateObject, title, URL) / / modify history window.history.replaceState (stateObject, title, URL) one by one

Toggle History

Including back, forward, go three methods, corresponding to browse forward (forward), backward (back), jump (go) operation.

Difference:

Both history and hash use the two features of the browser to implement front-end routing. History is implemented by using API of the browsing history stack, and hash is implemented by listening for hash value change events of location objects.

History's url does not have a'# 'number, but hash vice versa

The url modified by history can be any url,hash of the same domain and a url of the same document

The same url,history is triggered to be added to the browser history stack, but hash is not triggered.

Advantages and disadvantages of history and hash

History is prettier than hash's url (no'# 'sign)

The url modified by history can be any url,hash of the same domain and can only be the url of the same document.

History mode often requires backend support. If the backend nginx does not overwrite the routing address, it will return 404 url because it is the same document. Even if the backend does not overwrite the routing address, it will not return 404.

In hash mode, if you pass url as a parameter to the backend, the backend will be truncated directly from the'# 'and only deal with the url before the' #'. Therefore, there will be a problem of losing the content of the parameters after #, but there is also a solution to this problem in hash mode.

What are you afraid of in history mode?

Not afraid of moving forward, not afraid of going back, just afraid of refreshing (if the backend is not prepared), because the refresh actually requests the server.

In history mode, you are free to modify path. The final route of the history pattern is reflected in the pathname of url, which will be transmitted to the server, so the server needs to map every possible path value accordingly.

When refreshing, if there is no corresponding response or resource in the server, a 404 will be brushed out every minute.

The above is about the content of this article on "what are the differences between the two modes of vue-router". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.