vue路由传参的两种方式

被vue路由传参折腾的心累，总结下自己的经验，献给初次使用vue路由传参的同学，有哪里讲的不明白，可以给我留言哦。此篇文章演示环境：vue 2.6版本、vue-element-admin框架

一  通过name/params的方式传参

路由的代码，此处最需要的两个参数就是path、name，其他的不重要。

  {
    path: '/news',
    component: Layout,
    redirect: 'index',
    meta: { title: '新闻管理', icon: 'list' },
    children: [
      {
        path: 'info/:newsData', // 这里要加上/:newsData，如果有多个参数，可以写多个，比如/:a/:b
        name: 'newsDetail',     // 这是别名
        component: () => import('@/views/news/detail.vue'),
        meta: { title: '新闻发布' }
      }
    ]
  },

传参

/**
 * 如果参数是一个object，需要用JSON.stringify将它转换成字符串
**/
handleEdit(row) {
    this.$router.push({ 
        name: 'newsDetail', // 这里要写路由表中设置的name值
        params: { 
            newsData: JSON.stringify(row) // newsData是在路由表中设置的params
        }
    })
}

接收参数

// 我是在created这个生命周期里接收参数的
created() {
    const params = this.$route.params.newsData
    console.log(JSON.parse(params))
}

最后浏览器是url是这样的

总结：

通过name/params方式传参，想要刷新浏览器传参不消失，需要满足两点：

1、在path加上/:newsData，

2、参数必须是字符串。

二 通过path/query方式传参

路由的代码，这种方式就不需要在path上再添加:/newsData了

  {
    path: '/news',
    component: Layout,
    redirect: 'index',
    meta: { title: '新闻管理', icon: 'list' },
    children: [
      {
        path: 'newsDetail',
        component: () => import('@/views/news/detail.vue'),
        meta: { title: '新闻发布' }
      }
    ]
  },

传参

handleEdit(row) {
    this.$router.push({ path: 'newsDetail', query: row })
}

接收参数

//我是在created生命周期里接收参数的
  created() {
    const params = this.$route.query
    console.log(params)
  },

最后浏览器的url是这样的

总结：刷新浏览器，传参不消失

三 通过name/query方式传参

写到这里，可能有人会产生疑问，this.$router.push中name和query搭配不能传参吗，下面就来一个栗子

路由的代码

  {
    path: '/news',
    component: Layout,
    redirect: 'index',
    meta: { title: '新闻管理', icon: 'list', roles: ['ROLE_ADMIN'] },
    children: [
      {
        path: 'info',
        name: 'newsDetail',
        component: () => import('@/views/news/detail.vue'),
        meta: { title: '新闻发布', roles: ['ROLE_ADMIN'] }
      }
    ]
  },

传参

handleEdit(row) {
    this.$router.push({ name: 'newsDetail', query: { newsData: JSON.stringify(row) }})
}

接收参数

  created() {
    const params = this.$route.query.newsData
    console.log(JSON.parse(params)）
  }

浏览器url

总结：this.$router.push中name和query搭配使用也可以传参，且刷新浏览器传参不消失，需要注意的是，此时路由中就不需要在path加上/:newsData了。

 

最后：vue路由传参的几种方式写完了，总结一下，this.$router.push中可以有name/params、name/query、path/query这几种搭配使用的方式，path和params在一块搭配使用无效。

使用name/params这种搭配方式，想要使浏览器刷新传参不消失，一定要注意：在path加上/:newsData且传参为字符串。

看完这篇文章，如果你的传参还是失败，检查一下代码拼写是否有错误，注意传参是this.$router，接收参数是this.$route

觉得有用请点赞收藏哦！

转载请声明文章原出处。