【vue】路由传参的三种方式

前言：vue组件之间的传值我已经写过一篇博客了，详见https://www.cnblogs.com/shijianblog/p/12525017.html，这篇主要讨论路由传参。

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：

 1 <li v-for="article in articles" @click="getDescribe(article.id)"> //这里随意

methods：

方案一：

1       getDescribe(id) {
2         //   直接调用$router.push 实现携带参数的跳转
3         this.$router.push({
4           path: `/describe/${id}`,
5         })

需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

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

       this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id

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

    this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
    })

对应路由配置：

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
    }

对应子组件: 这样来获取参数

this.$route.query.id

注意：

对于方案二有些问题需要注意以下：

当然选择不选择是你的事情，各有优劣，加id的话会在url里面显示出来参数，这个可能是一部分人不想要的~

总结：我个人比较推荐第三种方案，话不多说，贴一下实际项目中的应用代码：

　　父组件路由跳转：

        this.$router.push({
              name: "石健ex",//当然这里id、name都可以的
              query: { data: item}
        });

　　路由配置：

    {
          path:'/ex',
          name:"石健ex",        
          component:resolve=>require(['@/views/homepage/ex.vue'],resolve),
    },

　　子组件获取data：注：写在生命周期里页面加载完成之前，如mounted()

this.dataItem = this.$route.query.data;