The difference between the two modes of Vue-router

1, everyone knows that VUE is a single page application, single-page application is only loaded with the corresponding HTML / CSS / JS single page load is completed when the page is initialized, and does not perform the page due to the user’s operation. Re-load or jump, use JavaScript dynamic change HTML content

Advantages: Good interaction experience, users do not need to refresh the page, the page shows smooth, good front-rear end working separation mode, reduce server pressure, [ Disadvantages: It is not conducive to SEO, more time-consuming time

2, Hash mode

Vue-router default is Hash mode – use URL’s HASH to simulate a complete URL, So when the URL changes, the page will not be reloaded, that is, the single page application, when the #aSh has changed, does not cause the browser to send a request to the server, the browser does not send a request will not refresh the page, and The Haschange event will be triggered by listening to the change of the HASH value

For the Hash mode, the Hashhistory object is created. When accessing different routes, two things will occur:

Hashhistory.push () Add a new route to the historic stack top of the browser access, and Hashistory.Replace () replaces the route of the current stack top


vue-router的两种模式的区别 3, History Mode

Mainly using the HTML5 PushState () and ReplaceState () These two APIs are implemented, and PushState () can change the URL address and will not send a request. ReplaceState () can read the history stack, you can also modify the browser record

Window.history.pushState (StateObject, Title, URL) WINDOW.HISTORY.REPLACESTATE (StateObject, Title, URL)

History.go (-2); // After retreating History.go (2); // forward two times history.back (); // Back hsitory.forward (); // forward

Front of Hashchange, you can only change the #ailed URL fragment. The new URL set by PushState can be any URL that is homologous to the current URL. History mode, the URL modifies the URL of the Normal request, such as routing processing of the corresponding / user / ID, if the rear end is not configured, 404 errors


The above is the difference between the two modes of the Vue-Router introduced to you, I hope that everyone can help, if you have any questions, please leave a message, Xiaobian Will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website! If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment