In many cases in a project, value transfer between routes is required, and many ways have been considered

Sessionstorage and localstorage/cookie offline cache storage can also be used vuex can also, but some overqualified, however owing to the different scenarios

Next, I will talk about the three basic methods of route parameter transmission provided by VUE

First, click a button on the current page to jump to another page, and bring a value there

<div class="examine" @click="insurance(2)">Copy the code

The first method does not lose page refresh data

Methods: {insurance(id) {this.$router.push({path: '/particulars/${id}',})}Copy the code

Routes must be configured as follows:

{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }
Copy the code

You can see that you need to add /:id to path to match the parameter that path carries in $router.push. Can be used in the child component to get the values of the parameters passed in addition to the page to get the parameters as follows

this.$route.params.id
Copy the code

Page refresh data is lost in the second method

The matched route is determined by name in the route attribute, and the parameters are passed through params.

Methods: {insurance(id) {this.$router.push({name: 'particulars', params: {id: id}})}Copy the code

Route configuration: Note that :/id cannot be used to pass parameters, because params is already used to carry parameters in the component.

 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }
Copy the code

Child component: To get the parameters

this.$route.params.id
Copy the code

The third method uses path to match the route, and then passes the parameters through Query in which case the parameters passed by Query are displayed after the URL, okay? Id =?

Methods: {insurance(id) {this.$router.push({path: '/particulars', query: {id: id}})}Copy the code

Route configuration:

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }
Copy the code

Corresponding subcomponent: This is how to get the parameters

this.$route.query.id
Copy the code

Pay special attention,

Component when the parameter is retrievedRouter This is important

Author: w night breeze link: www.jianshu.com/p/d276dcde6… This article is only xiaobian notes afraid of the author original deleted copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.