background knowledge
Most Vue projects are developed in the SPA (Single Page Application) model, and the switching of different views must be managed and controlled through front-end routing.
Therefore, when we develop vue projects, we will install vue-router to implement front-end routing and control the switching of views.
The function of front-end routing is to change the view without making a request to the back-end.
The principle of vue-Router is to use the two characteristics of the browser itself (hash and history) to realize the front-end routing function.
History and hash implementation principle
History mode realization principle
Before introducing the history mode, you need to understand the window.history object
window.history provides two types of APIs, one is go(), back(), forward(), which locates to a certain browsing history record; the
other is It is pushState(), replaceState(), which is an interface for manipulating history records (adding and replacing history record stacks).
History mode is to use pushState() and replaceState() to implement front-end routing. If the URL is changed through these two methods, the page will not be refreshed.
After using these two methods to change the url, the popstate event will be triggered, and the popstate event will be monitored to implement front-end routing.
window.addEventListener('popstate', function(e) {alert('url update') });
When we visit different URLs in the same domain, the popstate event can be triggered
Hash moede implementation principle
URLs under hash mode have a feature, that is, the URL has a'#' sign,
such as: https://www.baidu.com/#/view1. After the'#' sign is the hash value.
Similarly, changing the hash value will not send a request to the server, so the page will not be refreshed. Every time the hash value changes, the hashchange event is triggered. Realize front-end routing by monitoring the hashchange event:
The difference between history and hash
The main differences between history and hash are as follows:
- Both history and hash use the two features of the browser to implement front-end routing. History is implemented using the API of the browsing history stack, and hash is implemented by monitoring the location object hash value change event.
- The history url does not have a'#' sign, the hash is reversed
- The URL modified by history can be any URL of the same domain, and hash is the URL of the same document
- For the same URL, history will be triggered to be added to the browser history stack, and hash will not be triggered.
Advantages and disadvantages of history and hash
- History is more beautiful than hash url (no'#' sign)
- The URL modified by history can be any URL of the same domain, and the hash can only be the URL of the same document
- History mode often requires back-end support. If the back-end nginx does not cover the routing address, it will return 404. The hash is the URL of the same document, even if the back-end does not cover the routing address, it will not return 404.
- In hash mode, if the URL is passed as a parameter to the backend, the backend will be directly truncated from the'#' number, and only the URL before the'#' number will be processed. Therefore, there will be a problem that the parameter content after the # is lost, but this problem There are also solutions in hash mode.
to sum up
In general scenarios, history or hash can be used for front-end routing. Personally recommend history mode. History mode is more in line with personal usage habits, as long as the back-end nginx is configured.