router link tab
jump
<router-link to="/list/one">
<span>link Jump</span>
</router-link>
// Adding parameters
<router-link :to="{path:'/list/two', query:{id:1,name:'vue'}}">
</router-link>
// Get parameters in subpages
id = this.$route.query.id
// Open in the new Windows
<router-link :to="{path:'/list/three', query:{id:1,name:'vue'}}" target="_blank">
</router-link>
this.$router.push()
Jump
toList (e) {
this.$router.push({path: "/list", query: {id: e}})
}
// Adding parameters
id = this.$route.query.id
toList (e) {
this.$router.push({name: "/list", params: {id: e}})
}
// Note that the address needs to be written after the name
//parameter acquisition, params and query difference, query parameters are displayed in the address bar, params parameters are not displayed in the address bar
id = this.$route.params.id
this.$router.replace
Jump
//The difference between push and push is that push records a history, while replace does not.
toList (e) {
this.$router.replace({name: '/list', params: {id: e}})
}
Similar Posts:
- Vue: How to use Vue-router in Axios
- [Solved] Vue Error: NavigationDuplicated: Avoided redundant navigation to current location: “xxx”.
- Component is missing template or render function [How to Solve]
- Vue jumps to this page and reports an error
- [Solved] Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
- Resolve Vue the navigationduplicated error on the console
- [Solved] VUE Project Error: Avoided redundant navigation to current location: “/XXX“
- [Solved] Vue router in the element UI navigation bar repeatedly clicks on the menu above version 3.0 and reports errors
- [Solved] Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to