1. Declarational transmission
Transfer parameters (display parameters)
The value of the parameter passed will be displayed in the url, and the refresh page will not lose the parameters you get. When passing values in this way, the subroutine needs to configure the parameters in advance:
//Route parameter configurationconst router = new VueRouter({
routes: [{
path: '/about/:id',
component: User
}]
})
//Use declarative navigation<router-link to="/about/12">Jump</router-link>//Route parameter configurationconst router = new VueRouter({
routes: [{
name: 'user1',
path: '/about/:id',
component: User
}]
})
//Use declarative navigation<router-link :to="{ name: 'user1', params: { id: 123 } }">Jump</router-link>Pass parameters (no parameters are displayed)
The value of the parameter passed will not be displayed in the url, but refreshing the page will lose the parameters you get. When using this method to pass the value, the subroutine needs to configure the name parameter in advance:
//Route parameter configurationconst router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//Use declarative navigation<router-link :to="{ name: 'user1', params: { id: 123 } }">Jump</router-link>Transfer the ginseng
The parameters passed by query will be spliced in the address bar (?name=xx), and the data of refreshing the page will not be lost. Both path and name are available:
//Route parameter configurationconst router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//Use name<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>
//Use path<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>2. Programming parameters
Transfer parameters (display parameters)
//Routing configuration{
path: '/child/:id',
component: Child
}
//Programmingthis.$({
path:'/child/${id}',
})//Routing configuration{
path: '/child:id',
component: Child,
name:Child
}
//Programmingthis.$({
name:'Child',
params:{
id:123
}
})Pass parameters (no parameters are displayed)
//Routing configuration{
path: '/child',
component: Child,
name:Child
}
//Programmingthis.$({
name:'Child',
params:{
id:123
}
})Transfer the ginseng
//Routing configuration{
path: '/child',
component: Child,
name:Child
}
//Programming//name methodthis.$({
name:'Child',
query:{
id:1
}
})
//path waythis.$({
path:'/child',
query:{
id:1
}
})
3. Obtain parameters
1. How to obtain params
this.$
2. How to obtain query
this.$
4. Points to be noted
1. If you use params to pass parameters and the parameters are in the form of an object, the jump path can only use name but not path.
2. If you want to pass the params parameter, you can also not pass the parameters and add them after the placeholder.
//Route parameter configurationconst router = new VueRouter({
routes: [{
path: '/search/:keyword?',
name: 'search',
component: () => import('@/pages/Search'),
meta: { show: true }
}]
})
//Programming parameters this.$({
name: "search",
params: {},
query: { keyword: },
});3. Solve the problem that the params passes the value to an empty string path:
this.$({
name: "search",
params: { keyword: "" || undefined },
query: { keyword: },
});Summarize
This is the article about the summary of the method of vue routing parameters and obtaining parameters. For more related contents of vue routing parameters and obtaining parameters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!