vue路由$router.push()的三种传参方式
·
$ router.push() 的三种传参方式
最近在工作中遇到需要使用$router.push传递一个对象,在这里做一下技术总结
通过path传参
很常用的一种,传递的参数会显示到path中,在刷新页面时数据不会丢失,常用于数据的新增、编辑、查看详情。
this.$router.push(`pushAdd/${id}`)
路由配置
{
path: '/pushAdd/:id',
component: () => import('@/views/$routePush/add'),
},
path展示
参数获取
this.$route.params.id
通过params传参
不会显示在path上
页面刷新数据会丢失
通过路由name匹配路由
let data={
name:'zhangsan',
age:18
}
this.$router.push({
name:'RoutePushEdit',
params:{
id:id,
data:data
}
})
路由配置
{
path: '/pushEdit',
name: 'RoutePushEdit',
component: () => import('@/views/$routePush/edit'),
},
参数获取
this.$route.params.id;
this.$route.params.data;
通过query传参
会显示在path上
页面刷新数据不丢失
通过路由name匹配路由
let data={
name:'zhangsan',
age:18
}
this.$router.push({
name:'RoutePushEdit',
query:data
})
路由配置
{
path: '/pushEdit',
name: 'RoutePushEdit',
component: () => import('@/views/$routePush/edit'),
},
path
参数获取
this.$route.query
更多推荐
已为社区贡献5条内容
所有评论(0)