Route redirect mode

Route redirect mode

There are four ways to redirect a Vue route

	1. router-link
	2. this.$router.push() (called in function)3. this.$router.replace() (same usage as push)4. this.$router.go(n)
Copy the code

1. No parameters are required

1.1 the router – the link

	<router-link :to="{name:'home'}"> 
	<router-link :to="{path:'/home'}">// Router-link starts from the root route if it starts with a '/'; if it does not start with a '/', it starts from the current route.Copy the code

1.2 this. $router. Push

	this.$router.push('/home') 
	this.$router.push({name:'home'}) 
	this.$router.push({path:'/home'})
Copy the code

$router. Replace () this.$router. Replace ()

2. Take parameters

2.1 the router – the link

	<router-link :to="{name:'home', params: {id:1}}"> 
	// params passes parameters (similar to post)
	// Route configuration path: "/home/:id" or path: "/home:id"
	// If path is not configured, the page ID will disappear after the first request
	// Set path to retain the id of the refreshed page
	// HTML takes the parameter $route.params.id
	// script takes the parameter this.$route.params.id
Copy the code

2.2 this. $router. Push (query parameter),

	this.$router.push({name:'home'.query: {id:'1'}})
	this.$router.push({path:'/home'.query: {id:'1'}}) 
	// HTML takes the parameter $route.query.id
	// script takes the parameter this.$route.query.id
Copy the code

2.3 params refs

	this.$router.push({name:'home'.params: {id:'1'}})  // Use name only
	// Route configuration path: "/home/:id" or path: "/home:id"
	// If path is not configured, the page ID will disappear after the first request
	// Set path to retain the id of the refreshed page
	// HTML takes the parameter $route.params.id
	// script takes the parameter this.$route.params.id
Copy the code

2.3 This.$router. Replace ()

3.this.$router.go(n)

this.router.go(n)this.router.go(n) Redirects n pages forward or backward. N can be a positive or negative integer:this$router.push jumps to the specified URL path and wants to add a record to the history stack. Click back to return to the previous pagethis$router.replace redirects to the specified url path, but there is no record in the history stackthis$router.go(n) redirects to n pages (n can be a positive or negative integer)Copy the code