Article Directory
foreword
The usage scenario of vue route parameter passing is generally applied when the parent route jumps to the child route, carrying parameters to jump. The parameter passing method can be divided into params parameter passing and query parameter passing, and params parameter passing can be divided into displaying parameters in the url and not displaying parameters. These are the three ways of vue routing parameter passing.
Of course , these three methods of passing parameters are only for the Vue Router V3 version, and the routing parameters of the V4 version will be somewhat different; the V3 version is often used in conjunction with vue2; while the V4 version is mostly used in conjunction with vue3;
1. paramsPass parameters (display parameters)
This method is also called dynamic routing matching on the official website of vue router ;
/user/:id1, first you need to configure the colon + parameter ( ) in the routing table
// 这是动态路由 加上：/:id
{
path: "/routers/:id",
name: "Routers",
meta: {
title: "动态路由" },
component: () => import("../views/routers/routers.vue")
},
2. Start to jump and pass parameters
jumpTo() {
this.$router.push({
path: "/routers/123" });
}
3. Obtain dynamic routing parameters
created(){
console.log('获取', this.$route.params); //{id: '123'}
}
Of course, you can also pass multiple parameters, but you need to configure multiple parameters in the routing table, as follows:
注意: Respond to changes in routing parameters
Note: When using route parameters, such as navigating from /user/foo to /user/bar, the original component instance will be reused. Because both routes render the same component, reuse is more efficient than destroying and recreating. However, this also means that the component's lifecycle hooks will no longer be called.
When reusing components, if you want to respond to changes in route parameters, you can simply watch (monitor changes) on the $route object:
const User = {
template: '...',
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
}
Or use the beforeRouteUpdate navigation guard introduced in 2.2:
const User = {
template: '...',
beforeRouteUpdate(to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
Second, paramspass parameters (parameters are not displayed)
1. If you use the method of not displaying parameters, you do not need to configure the routing table:
{
path: "routers",
name: "Routers",
component: () => import("../views/routers/routers.vue")
},
2. Start to jump and pass parameters
Note: You need to specify the name in the routing table to correspond to it;
jumpTo() {
this.$router.push({
name: "Routers", params:{
id:123 } });
}
3. Get parameters
this.$route.params.id
注意: The above method of using params to not display url parameter passing will cause the passed value to be lost when the page is refreshed; it needs to be used with caution.
Three, querypass parameters (display parameters)
This method of passing parameters will stitch your parameters to the route with question marks; refresh the page and the route will not be lost.
1. This kind of routing table does not need to be configured:
{
path: "routers",
name: "Routers",
component: () => import("../views/routers/routers.vue")
},
2. Start to jump and pass parameters
Note: It needs to correspond to the path attribute in the routing table;
this.$router.push({
path:'/routers', query:{
id:123 } })
3. Get parameters
this.$route.query.id