There are many ways to transfer parameters between vue pages, such as localStorage localStorage and vuex

This article is mainly about transferring parameters through routes

Many people are familiar with the page transfer, but for the novice may be a little confused, a lot of online information, as if said is still very vague, so their own pro test several ways to do a simple summary:

There are two types of route parameter transmission

This.$router.push(); this.$router.push()

The first option is to jump directly to the path path

<router-link to="detail"></router-link>
Copy the code

If it is a jump with parameters

<router-link to="{path:'/apply-detail',query:{id:1}}">
Copy the code

This.$route.query

Call this.$router.push() by adding click events

<div onClick="jump()"> jump < / div >jump(id){
    this.$router.push()
}
Copy the code
1,this.$router.push({name:'ApplyDetail'.query: {detailId: id}}) parameter displayed in address bar? detailId=123
Copy the code
2,this.$router.push({name:'ApplyDetail'.params: {detailId: id}}) Parameters are not visible in the address barCopy the code
3,this.$router.push({path:'apply-detail'.query: {detailId:id}}) parameter displayed in address bar? id=123  同1
Copy the code
4,this.$router.push({path:`apply-detail/${id}`}) parameters are displayed in the address bar apply-detail/123Add :id {to path}path: '/apply-detail/:id'.name: 'ApplyDetail'.component: () = > import('@/pages/apply-detail'),
 meta: { title: 'Application Details'}}Copy the code

This.$router.push();

$router.push() if the jump needs to do something like an interface request, use this.$router.push().

1 is the same as 3 (I chose 1)

Use 1 for multiple parameters

To keep the address simple, use 4