vue $router.push路由跳转传参数

vue路由跳转传参数

使用场景:跳转的页面需要根据参数获取页面的数据

路由配置

{
    path: '/detail-info',
    name: 'detailInfo',
    component: () => import('@/views/detailInfo'),
},

方法一

name + params 传参数

toInfoPage(){
    this.$router.push({
         name: 'detailInfo',
         params: {
             name: this.name
         }
     })
 },

使用 this.$route.params.name 接收
区别: 使用param传的参数不会出现在路由中，界面刷新后参数就不存在。

方法二

path + query 传参数

toInfoPage(){
    this.$router.push({
         path: '/detail-info',
         query: {
             name: this.name
         }
     })
 },

使用 this.$route.query.name 接收

区别: 使用query传的参数出现在路由中，界面刷新后传参仍然存在。

易错点: 跳转时用 $router,有 r, 接收参数时用 $route.