Detailed explanation of the two modes of Router routing in Vue: hash and history

hash mode (default)

Working principle: Monitor the hash value changes of the web page—> onhashchange event, get location.hash

Use a hash of the URL to simulate a full URL, so the page doesn't reload when the URL changes.

It will give the user the feeling that the web page has been redirected, but in fact it has not been redirected.

Mainly used in single page applications (SPA)

//Simulation principle//Monitor page hash value changes window.onhashchange = function(){
	// Get the hash value of the current url const _hash = location.hash
	// Display different content according to different hash values ​​switch(_hash) {
	     case '/#a':
	        document.querySelector('#app').innerHTML = '<h1>I am page 1 content</h1>'
	        break;
	     case '/#b':
	        document.querySelector('#app').innerHTML = '<h1>I am page 2 content</h1>'
	        break;
	     case '/#c':
	        document.querySelector('#app').innerHTML = '<h1>I am page 3 content</h1>'
	        break;
	} 
}

history mode

Working principle: Mainly use history.pushState() API to change the URL without refreshing the page.

There are actually five modes that can change the URL without refreshing the page.

history.pushState()

history.replaceState()

history.go()

history.back() --> Equivalent to history.go(-1)

history.forward() --> Equivalent to history.go(1)

Need backend configuration support. If you enter a URL that does not exist, the backend configuration needs to be used as a "backup configuration". Instead of returning a 404, it returns to the home page.

Enable history mode

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

The above is the detailed content of the two modes of Router routing in Vue, hash and history. For more information about the Router routing mode in Vue, please pay attention to other related articles on 123WORDPRESS.COM!