vue-router的这些易混知识点你真的会了吗

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

更多详细内容可查阅 VueRouter官方文档

1.在组件内可通过 this.$router 访问整个 路由器，也可以通过 this.$route 访问 当前路由

// Home.vue
export default {
  computed: {
    username() {
      // this.$route 访问当前路由
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      // this.$router 访问整个路由器对象
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

2.动态路由中 可以设置多段 “路径参数”，对应的值都会设置到 $route.params 中

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: evan }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

3.编程式导航中 提供了 path，params 会被忽略

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

4.路由参数变化时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用，此时如果想对参数的变化做出响应的话，可以简单地 watch（监测变化）$route 对象：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

6.组件的导航守卫中 beforeRouteEnter 守卫 不能 访问 this，因为 守卫在导航确认前被调用，因此即将登场的新组件还没有被创建。 可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

7.完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。