开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

前言

在我们进行路由跳转的时候，往往需要把当前页面的某些信息带到跳转页面的路由上。而最常用的场景就是用户ID的传递，我们就可以在路径传递用户信息就可实现，又称为路径参数。

动态路由

有了路径参数，对应的还需要在路由表中进行相应的配置，并建立组件与路由之间的映射。

const User = {
  template: '<div>用户</div>',
}
const routes = [
  // 路径参数对应的key以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

配置完之后，当我们访问 /users/123 和 /users/456这样的路由时，便会匹配到同一个页面，与此同时，路径参数将以this.$route.params 的形式暴露出来。

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

不仅如此，还可进行多参数的传递：

const routes = [
  // 路径参数对应的key以冒号开始
  { path: '/users/:id/schools/:school', component: User },
]

当访问/users/123/schools/加利盾大学这样的路由时，this.$route.params 将会返回 { id: 'eduardo', school: '加利盾大学' }这样的结果。

当然，我们也可以通过 this.$route.query 的形式获得url的参数信息。

有一点需要注意的是：

当导航时，路由只是路劲参数发生了变化，而映射的组件并没有改变时，该组件将会被复用，而这也避免了资源浪费的问题，但也就意味着组件的生命周期将不会被调用。

针对这种情况，我们可以使用watch监听的形式，来解决。

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化进行相应的业务处理...
      }
    )
  },
}

又或者，可以使用beforeRouteUpdate导航守卫的形式，进行相应的业务处理。

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化进行相应的业务处理...
    
  },
}

Vue Router入门指北（二）动态路由

前言

动态路由