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.