vue路由$router.push()的三种传参方式_vue router push 传参

$ router.push() 的三种传参方式
最近在工作中遇到需要使用$router.push传递一个对象，在这里做一下技术总结

通过path传参

很常用的一种，传递的参数会显示到path中，在刷新页面时数据不会丢失，常用于数据的新增、编辑、查看详情。

this.$router.push(`pushAdd/${id}`)
1

路由配置

{
                path: '/pushAdd/:id',
                component: () => import('@/views/$routePush/add'),
            },
1
2
3
4

path展示

参数获取

this.$route.params.id
1

通过params传参

不会显示在path上
页面刷新数据会丢失
通过路由name匹配路由

			let data={
                name:'zhangsan',
                age:18
            }
            this.$router.push({
                name:'RoutePushEdit',
                params:{
                    id:id,
                    data:data
                }
            })
1
2
3
4
5
6
7
8
9
10
11

路由配置

{
                path: '/pushEdit',
                name: 'RoutePushEdit',
                component: () => import('@/views/$routePush/edit'),
            },
1
2
3
4
5

参数获取

this.$route.params.id;
this.$route.params.data;
1
2

通过query传参

会显示在path上
页面刷新数据不丢失
通过路由name匹配路由

			let data={
                name:'zhangsan',
                age:18
            }
            this.$router.push({
                name:'RoutePushEdit',
                query:data
            })
1
2
3
4
5
6
7
8

路由配置

{
                path: '/pushEdit',
                name: 'RoutePushEdit',
                component: () => import('@/views/$routePush/edit'),
            },
1
2
3
4
5

path

参数获取

this.$route.query
1