There are hash mode and history mode in vue-router.
There is a mode option in the routing configuration of vue. The most intuitive difference is that the hash has a # in the url, and there is no # in the history. Vue uses hash by default.
mode:"hash";
mode:"history";
| name | hash | history |
|---|---|---|
| url | https://baidu.com/#/home | https://baidu.com/home |
| Refresh | https://baidu.com | https://baidu.com/home |
| version | Support low version and IE browser | H5's new API |
hash
That is, the # symbol in the URL of the address bar (this hash is not a hash operation in cryptography).
For example, this URL: http://www.baidu.com/#/home, the value of hash is #/home. Its characteristic is that although the hash appears in the URL, it will not be included in the HTTP request and has no effect on the backend. Therefore, changing the hash will not reload the page.
history
Use the new pushState() and replaceState() methods in the HTML5 History Interface (requires specific browser support) to complete the URL jump without reloading the page, but this mode also requires background configuration support. Because our application is a single-page client application, if the background is not properly configured, you need to configure the 404 page.
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '*', component: NotFoundComponent }
]
})
the difference
Through the history api, we lost the ugly #, but it also has a problem: not afraid of going forward, not afraid of going back, but afraid of refreshing (if the backend is not prepared), because refreshing actually requests the server.
In the hash mode, the front-end routing modifies the information in #, and the browser does not send the data after # to the back-end when requesting, so there is no problem. But under history, when you modify the path, when refreshing, if there is no corresponding response or resource in the server, the 404 page will be refreshed.