There are four ways to redirect a VUE route
1. router-link
2. This.$router.push()
3. This.$router. Replace ()
4. this.$router.go(n)
One, no parameter
1.1 the router – the link
< the router - link: to = "{name: 'home'}" > < the router - link: to = "{path: '/ home'}" > / / name, path, suggest using name / / note: In router-link, if a link starts with a '/', it starts from the root route; if a link 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 ()
Second, with the cords
2.1 the router – the link
<router-link :to="{name:'home', params: {id:1}}" <router-link :to="{name:'home', params: {id:1}}"> "/home:id" // no path is configured, the first request can be made, the page ID will not be refreshed // Set path, the page ID will be retained // HTML take the parameter $route.params.id // script take the parameter this.$route.params.id <router-link :to="{name:'home', query: {id:1}}"> // query: $route.query.id; // HTML: $route.query.idCopy 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 fetch $route.query.id // script fetch $route.query.id params fetch $route.push ({name:'home',params: {id: '1'}}) / / can only use the name / / routing configuration path: "/ home / : id" or path: "/home:id" , $route.params.id = $route.params.id = $routeCopy the code2.3 This.$router. Replace ()
this.$router.go(n)
$router. Go (n) this.$router. Go (n) this.$router
The difference between:
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 page
This.$router. Replace redirects to the specified url, but there is no record in the history stack.
This.$router.go(n) jumps forward or backward to n pages. N can be a positive or negative integer