Vue-router路由传参三种方法及区别

先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

<el-button type="primary" @click="handleClick(2)">查看详情</el-button>

1、第一种方法：拼接方式

methods：{
  handleClick(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/detail/${id}`,
     })
}

对应路由配置：

{
   path: '/detail/:id',
   name: 'detail',
   component: detail
}

获取参数方式：

this.$route.params.id

 这种方式传参，页面刷新数据不会丢失。

2、第二种方法：params传参

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods：{
  handleClick(id) {
    this.$router.push({
      name: 'detail',  // 根据name确定匹配路由
      params: {
        id: id
     }
  })
}
//或者采用router-link
<router-link :to="{name: 'detail', params: { id: 1 }}">前往Detail页面</router-link>

对应路由配置：

{
   path: '/detail/:id',
   name: 'detail', 
   component: detail
}

获取参数方式：

this.$route.params.id

需要注意的是，params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面。例如，

// 定义的路由中，只定义一个id参数
{
    path: 'detail/:id',
    name: 'detail',
    components: detail
}

// template中的路由传参，
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数，而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>

// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后，id依然可以获取，而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

三、第三种方法：query传参

使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？

methods：{
  handleClick(id) {
        this.$router.push({
          path: '/detail',
          query: {
            id: id
          }
     })
 }

对应路由配置：

{
     path: '/detail',
     name: 'detail',
     component: detail
}

获取参数：

this.$route.query.id

四、总结：params和query中的区别

1、接收方式

query传参：this.$route.query.id

params传参：this.$route.params.id

2、路由展现方式

query传参：/detail?id=1&user=123&identity=1&更多参数

params传参：/detail/123