Detailed explanation of the two modes of hash and history in Vue

hash mode (default)

Working principle:Listen to the hash value changes of the web page —>onhashchange event, get

Use the hash of the URL to simulate a complete URL, so when the URL changes, the page will not reload.

It will give the user the feeling of jumping into the web page, but it does not actually jump

Mainly used inonePage Application (SPA)

// Simulation principle// Listen to the hash value change on the page = function(){
	// Get the hash value of the current url	const _hash = 
	// Show different contents according to different hash values	switch(_hash) {
	     case '/#a':
	        ('#app').innerHTML = '<h1>I am page 1 content</h1>'	        break;
	     case '/#b':
	        ('#app').innerHTML = '<h1>I am page 2 content</h1>'	        break;
	     case '/#c':
	        ('#app').innerHTML = '<h1>I am page 3 content</h1>'	        break;
	} 
}

history mode

Working principle: Mainly utilized() API to change the URL without refreshing the page.

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

()

()

()

() --> Equivalent to (-1)

() --> Equivalent to (1)

Backend configuration support is required. If you enter a URL that does not exist, you need to use the "bottom configuration" for the backend configuration. It does not return 404 roughly, but returns to the homepage.

Turn on history mode

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

The above is the detailed explanation of the two modes of Router routing in Vue. For more information about Router routing in Vue, please pay attention to my other related articles!