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