前言

想象一下以下场景：在一个项目里，需要一个列表组件渲染一个任务列表或购物车。不同的用户是完全不同的数据，但列表组件都是同一个。怎么在复用同一个组件的同时还能够渲染不同的数据呢？

在学路由之前，我们要实现渲染不同数据的需求，很有可能是同一结构建立成多个组件，然后每个组件接受不同的数据进行渲染。但这样存在代码冗余，同一结构反复出现，是一种多余。又或者，我们使用组件时是子传父$emit、父传子props的形式传递数据。如果是同一组件渲染不同数据，是不停地建新的数组或对象，然后将数据在组件间传来传去。在使用路由后，这两种方式都是不够理想的。并且组件的渲染通过 <router-view>，没法再通过$emit与props传递数据，但确实需要在切换路由时存在同一组件渲染不同数据的需求，这个怎么实现呢？

这时，动态路由匹配便能展现它强大的能力了。

Vue 动态路由参数

如果上面没能让你明白动态路由的作用，可以再想象一下，一个文章列表，虽然每次点击的文章不同，但渲染文章的组件却是同一个。这个如何实现?

首先来看看动态路由参数长什么样：

const routes = [
  {
    path: '/detail/:id', // 冒号加后面的这个参数便是 Vue 里的动态路由参数
    name: "BlogDetail",
    component: BlogDetail
  },
]

那这个参数的意思是什么呢？其实顾名思义，参数，就是变量，是变化的。其可以自己进行定义，比如案例中的参数是 id，每篇文章都有一个 id，当用户点击后将 id 传给渲染文章的组件，这个组件拿到该篇文章数据后就进行渲染，id 不同，渲染的内容也就不同。

那这里肯定有人会问，那这个参数怎么拿到呢？也就是渲染文章的组件如何拿到每次点击传过来的路由参数呢？那么，Vue 的惯例依然是使用 $ 方法，也就是 this.$route.params.参数名。当然，在 {{ }} 里是不需要 this 的。拿到这个参数后，就可以进行一些逻辑的书写了。

上面的案例只展示了一个参数的情况，还可以在一个路由中设置多段“路径参数”，例如：

/user/:username/post/:post_id

这些参数也都会被存到this.$route.params里，想要使用直接在后面跟上参数就好。

监听路由变化进行数据更新

在这里必须强调的一点是，我们在前面提到，根据路由参数的不同渲染不同的数据，也就是说渲染的组件是被无限复用的。组件被复用意味着它的生命周期只执行一次，其生命钩子不会再进行调用，数据是不会被更新的。既然如此，要想实现数据的更新，肯定还得借助其他办法。Vue 为我们提供了两种方法：

watch

通过 watch 对路径的变化进行监听，如果路由变化就可以对数据进行相应的改变：

 watch: {
    // 通过监听路由变化进行数据的更替
    $route(to) {
      if (to.path === '/all') {
        this.filteredTaskList = this.taskList
      } else if (to.path === '/active') {
        this.filteredTaskList = this.taskList.filter(ele => ele.status === false)
      } else if (to.path === '/completed') {
        this.filteredTaskList = this.taskList.filter(ele => ele.status === true)
      }
    }
  },

有时还得配合 updated() 钩子做一些处理，例如上述代码中的 status 作为一个 boolean 值，其作为对象的一个属性，如果不在 updated() 钩子里去响应其变化，那么列表项的状态改变不会被同步，也就无法刷新数据。

beforeRouteUpdate

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

这个方法是一个组件局部的导航守卫，意为在该组件进入路由改变前必须的操作。与 watch 的使用差异不大，但要特别注意的是需要调用 next() 函数，不然其不会进入下一步。

// to、from、next三个参数一个都不能省略，否则方法无法成功调用
beforeRouteUpdate (to, from, next) {
    if (to.path === '/all') {
        this.filterdTaskList = this.taskList
        next()
    } else if (to.path === '/active') {
        this.filterdTaskList = this.taskList.filter(ele => ele.chosen === false)
        next()
    } else if (to.path === '/completed') {
        this.filterdTaskList = this.taskList.filter(ele => ele.chosen === true)
        next()
    }
}

我的动态路由案例