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