今天给大家介绍vue中使用路由跳转的传参方法
1.用动态绑定
路由配置
{
path: 'child/:id',
name: "child",
component: () => import('./index.vue')
}
传参页面
this.$router.push({
path: `/child/${id}` // 动态传的参数
});
获取页面
const params = this.$route.params
2.query传参
路由配置
{
path: 'child',
name: "child",
component: () => import('./index.vue')
}
传参页面
this.$router.push({
path: `/child`,
query: {
id: id
}
});
获取页面
const params = this.$route.query
3.params传参
路由配置
{
path: 'child',
name: "child",
component: () => import('./index.vue')
}
传参页面
this.$router.push({
name: `child`,
params: {
id: id
}
});
获取页面
const params = this.$route.params
使用params传参一定要注意,不能用path属性跳转,可以用name。params对比上面两种的区别是地址栏里不会出现传递的参数,比较干净。
说到这,还有一种写法跟第一种类似。就是在path的最后以问号传参形式直接传入参数。如下面
{
path: `child?id=&{id}`
}