vue-rounter的使用心得

完整的 vue-router 导航解析流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、调用全局的 beforeEach守卫。

4、在重用的组件里调用 beforeRouteUpdate守卫 (2.2+)。

5、在路由配置里调用beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用beforeRouteEnter。

8、调用全局的 beforeResole 守卫 (2.5+)。

9、导航被确认。

10、调用全局的afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用beforeRouteEnter 守卫中传给 next 的回调函数。

vue-router有哪几种导航钩子（ 导航守卫 ）？

1、全局守卫： router.beforeEach

2、全局解析守卫： router.beforeResolve

3、全局后置钩子： router.afterEach

4、路由独享的守卫： beforeEnter

5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

导航表示路由正在发生改变，vue-router 提供的导航守卫主要用来:通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

注意：参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过 观察 $route 对象 来应对这些变化，或使用 beforeRouteUpdate的组件内守卫。

vue-router如何响应 路由参数 的变化？

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

vue-router有哪几种导航钩子（ 导航守卫 ）？

1、全局守卫： router.beforeEach

2、全局解析守卫： router.beforeResolve

3、全局后置钩子： router.afterEach

4、路由独享的守卫： beforeEnter

5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

导航表示路由正在发生改变，vue-router 提供的导航守卫主要用来:通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

注意：参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过 观察 $route 对象 来应对这些变化，或使用 beforeRouteUpdate的组件内守卫。