Vue-router has two modes: hash and history

The most obvious difference between them is the /#/ difference in the URL

hash

The hash value, which follows #, is not included in the default request and sent to the back end by default, which is one of its more important advantages: it does not refresh the page by resending the request

Let’s assume that the login page and hash are /login and the registration page is /register, so we can listen on it via Watch and attach some actions

let vm = new Vue({ data: {}, router, watch: { '$route.path': Function (newVal, oldVal) {if (newVal === '/login') {console.log(' welcome to the login page '); } if (newVal === '/register') {console.log(' Welcome to register page '); }}}})Copy the code

history

In history, the push State()replace State() method in HTML5 is used. The method annotation isto operate the browser’s history stack to realize the page jump function. History.back() is equivalent to the browser’s back function and equivalent to history.go (-1).

Go () corresponds to the forward function of the browser. When history.go () is set to -1, it corresponds to the previous page. When history.go () is set to 1, it corresponds to the forward page

History.pushstate () places the current page at the top of the browser History stack, or at the front

History.replacestate () replaces the current route

When they are called to modify the browser history stack, the browser does not immediately send a request for the current URL even if it changes, which provides a basis for single-page front-end routing, updating the view without re-requesting the page

Hash, the data after # will not be sent to the background, refresh will only request the URL before #,

History, since it is both used/separately, is considered to be a complete URL. If there is no corresponding URL in the background, 404 will appear