Code Better路由传参
查询字符串参数(queryString)
/user?id=123
1.定义路由规则
jsx
const routes = [
{
path: '/user',
name: 'user', // 对路由进行命名
component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
},
]1
2
3
4
5
6
7
2
3
4
5
6
7
2.路由传参
jsx
this.$router.push("/user?id=123")
this.$router.push({
path:'/user',
query: {
id:123
}
})
this.$router.push({
name:'user',
query: {
id:123
}
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
3.获取参数
jsx
this.$route.query.id1
路径信息参数(pathInfo)
user/123
1.定义路由规则
jsx
const routes = [
{
path: '/user/:id',
name: 'user', // 对路由进行命名
component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
},
]1
2
3
4
5
6
7
2
3
4
5
6
7
2.路由传参
jsx
this.$router.push("/user/123")
this.$router.push({
name:'user',
params: {
id:123
}
})
// 注意：path不能与params搭配1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
3.获取参数
jsx
this.$route.params.id1