$ 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
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐