VUE routing hash mode and history mode, this is also a common interview question, this question is actually a test of your development experience is true.

Hash mode URL with #, history mode without #.

The hash mode is always used in the URL, which is used by default in development. If users consider the specification of URL, they need to use history mode, because history mode has no #, which is a normal URL and suitable for promotion. Function: For example, when we developed the app, we had a sharing page, and the shared page was made with Vue or React. We shared the page with a third party app. Some APP urls were not allowed to contain # marks, so we had to use the history mode to remove # marks. There is also a problem with using history mode. If you need to configure apache or Nginx URL redirection to redirect to your home page, you will get a 404 error when you refresh the secondary page

To start

In order to change views without making requests to the back end, browsers currently provide two types of support:

Hash mode: the # symbol in the URL of the address bar. For example, in this URL: www.abc.com/#/hello, the hash value is #/hello. The hash, while present in the URL, is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page.

History mode: Takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface. (Browser-specific support required) These two methods apply to the browser’s history stack and provide the ability to modify the history in addition to the existing back(), forward(), and Go () methods. When these two methods make changes, only the URL of the current address bar can be changed, but the browser does not send a request to the back end, nor does it trigger the execution of the PopState event

Therefore, both hash and history modes are browser features, and vue-Router only uses these two features (by calling the interface provided by the browser) to implement front-end routing.

The router in vue has two modes: Hash mode (default) and history mode (mode: ‘history’ is required).

Hash mode in vue

The # symbol in the URL of the address bar is the hash symbol, the Chinese name hash or anchor point

Like this URL:www.baidu.com/#/home, a hashThe value of # / home

The trick is that the hash, while present in the URL, is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page.

The hashchange event will be called if the hash value of your URL (#) changes. The hashchange event will be used to get the changed URL. This will find the corresponding page to load

Window.addeventlistener ('hashchange', () => {// Assign the url of the changed URL address bar to the current, Call the router - this view to load the corresponding page. Data. Current = window. The location. The hash. Substr (1)})Copy the code

History mode in VUE

The pushState() and replaceState() methods, which require browser-specific support, have been added to the HTML5 History Interface to do URL jumps without reloading the page, although this mode also requires background configuration support. Because our application is a single-page client application, if the backend is not configured correctly, the front end will need to configure the 404 page itself.

PushState () and replaceState() allow you to replace urls without refreshing the page. HTTP does not request resources from the server. Display 404 (because once the browser refreshes, it is actually requesting the server resource)

How to solve the problem of “404” in history mode? This requires the server to redirect non-existent path requests to the entry file (index.html)

The pushState and replaceState methods can only cause the history object to change the URL of the current address bar, but the browser does not send a request to the back end or trigger the popState event

The popState event is triggered when the browser’s forward and back buttons are clicked

window.addEventListener('popstate', () => {
  this.data.current = window.location.pathname
})
Copy the code

Usage scenarios

In general, hash and history will work, unless you’re more concerned with the appearance level, and the # symbol does look a little ugly in the URL.

If you don’t want ugly hashes, you can use the history mode of the route, which takes full advantage of the history.pushState API to do URL jumps without reloading the page. In addition, calling history.pushstate () has the following advantages over modifying hash directly, according to Mozilla Develop Network:

PushState () sets the new URL to any URL of the same origin as the current URL; PushState () sets the new URL to be exactly the same as the current URL, which also adds records to the stack. PushState () The stateObject argument allows you to add any type of data to a record; Hash can only add a short string called pushState() and an additional title attribute for subsequent use

conclusion

Traditional routing means that when a user accesses a URL, the corresponding server receives the request and then resolves the path in the URL to perform the corresponding processing logic. This completes a route distribution

The front-end routing does not involve the server. It is realized by the front-end using hash or HTML5 history API, which is generally used for displaying and switching different contents