vue router 高级使用之导航守卫---笔记4

1：概念解析说明

导航：表示路由正在发生改变。

导航守卫：主要用来通过跳转或取消的方式守卫导航。并且有多种方式介入路由导航过程(路由发生变化时)中：全局的, 单个路由独享的, 或者组件级的。

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

2：导航守卫的介入方式

使用 router.beforeEach 注册一个全局前置守卫。通过路由实例调用beforeEach方法，这样注册的全部路由信息都在作用域内。允许注册多个，按注册顺序执行，导航会在所有首位resolve完之前保持等待。下面的参数next决定本次守卫的结果，next()参数为空，表示允许通过，并进入下一个守卫或者守卫结束开始导航。next(false)表示禁止通过，中断导航，若url被认为修改，此操作会修复至更改前。next('路径地址'或者{路径对象})表示当前导航中断，开启一个新导航。{路径对象}支router.push中的选项。next(error)参数为Error实例，将会中断当前导航，并且将错误传递给router.onErrror()里注册的处理函数。确保 next 函数在任何给定的导航守卫中都被严格调用一次。

使用router.beforeResolve 注册一个全局解析守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

注册全局后置钩子,导航被确认后触发，和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身。

可以在路由配置上直接定义路由独享的 beforeEnter 守卫

可以在路由组件内直接定义以下路由导航守卫：beforeRouteEnter beforeRouteUpdate  beforeRouteLeave

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。

离开守卫通常用来禁止用户在还未保存修改前突然离开。

 3：官方导航流程

 4：实测流程

 场景一：直接访问某个界面，非路由跳转。

场景二：组件复用即组件未失活，仅动态参数改变

场景三：原组件失活，激活新组建