$ 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