Shulou(Shulou.com)06/03 Report--

What is the hash mode and history mode of Router routing in Vue? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Hash mode (default)

How it works: listen for changes in the hash value of a web page-> onhashchange event to get location.hash

Use URL's hash to simulate a complete URL, so when the URL changes, the page does not reload.

It will give users the feeling that they have jumped to a web page, but in fact there is no jump.

Mainly used in single page applications (SPA)

/ / principle of simulation / / listen for hash changes on the page _ window.onhashchange = function () {/ / get the hash value of the current url const _ hash = location.hash / / display different content switch (_ hash) {case'/ # hash: document.querySelector ('# app') [xss_ according to different hash values Clean] ='I am page 1 content 'break Case'/ # baked: document.querySelector ('# app') [xss_clean] ='I am page 2 content 'break; case' / # app': document.querySelector ('# app') [xss_clean] ='I am page 3 content 'break;}} history mode

How it works: mainly use history.pushState () API to change URL without refreshing the page.

In fact, there are five modes that can change the URL without refreshing the page.

History.pushState ()

History.replaceState ()

History.go ()

History.back ()-> is equivalent to history.go (- 1)

History.forward ()-> is equivalent to history.go (1)

Backend configuration support is required. If you enter a url that does not exist, you need the backend configuration to do "backend configuration". Instead of rudely returning 404, you need to return to the home page.

Turn on history mode

Const router = new VueRouter ({mode: 'history', routes: [...]}) after reading the above, have you mastered the hash mode and history mode of Router routing in Vue? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.