Vue-router (front-end routing) has two modes, hash mode and history mode
History and hash mode comparison
The same point : both can realize the jump function of the page
difference:
(1) Path format: the path path in history mode does not have a # sign, and the path in hash mode has a # sign
(2) Realization principle:
History mode The history mode is implemented by calling the history.pushState method (or replaceState) and listening to the popstate event.
The hash mode is implemented by listening to the hashchange event
The compatibility of hash mode is good, and the compatibility of history is slightly worse than that of hash mode (the API used at the bottom layer is HTML5 API, which has certain requirements for browsers)
(3) After the project is launched, the project developed by different history needs to be supported by the back-end configuration after it is packaged and launched, otherwise a 404 error page will appear
Why is there a 404 page?
(1) When .history accesses this address, for example http://www.xxx.com/find, the req.url received by the backend is find, but we are a single-page application, and only one resource is index.html, There is no resource called /find, so 404 will be reported
(2) When .hash accesses this address, for example http://www.xxx.com/#/find, the req.url received by the backend is /, and there is a resource index.html, so it can be displayed normally