VUE 爬坑之旅-- 路由传参的几种方式及注意点

在 VUE 项目中，页面之间跳转都需要使用路由，而路由在跳转的时候需要传递各种参数也是一个很常见的需求，那么 VUE 中路由传参有几种方式呢？

方式一：直接调用$router.push 实现携带参数的跳转

    showDetail(id) {
        this.$router.push({
          path: `/detail/${id}`,
        })

需要对应路由配置如下：

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

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

this.$route.params.id

特别注意，获取参数是用的 $route，而不是$router

这种方式最后得到的链接是这个样子的：

http://www.xxxx.com/detail/10000

推荐使用这种方式来传递页面 id 之类的参数，因为页面加载是需要依赖这个参数的，没有这个参数整个页面就加载不出来，在正常使用的时候一般不会有问题，但是当在某些时候，比如这个详情链接在分享出去后，如果不用这种方式传递参数，那么被分享出去的链接别人打开之后就是加载不出来或者会被跳转到首页之类的地方，这样的结果显然不是我们需要的。

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

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

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

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

子组件中: 这样来获取参数，同样要注意用 $route ,而不是$router

this.$route.params.id

方式三：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

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

对应路由配置：

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

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

this.$route.query.id

以上，就是在 VUE 中使用路由传参的几种方式和二个注意点。