Vue new page Jump [Three Method to Use]

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.replaceJump

//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: