路由导航守卫 #

全局的前置守卫 beforeEach 是在导航触发时会被回调的：

router.beforeEach((to,from)=>{
    console.log(to)
    console.log(from)
    return false
})

它有两个参数 #

• to：即将进入的路由 Route 对象；
• from：即将离开的路由 Route 对象；

它有返回值 #

• false：取消当前导航；
• 不返回或者 undefined：进行默认导航；
• 返回一个路由地址：
  • 可以是一个 string 类型的路径；
  • 可以是一个对象，对象中包含 path、query、params 等信息；

可选的第三个参数：next #

• 在 Vue2 中我们是通过 next 函数来决定如何进行跳转的； 路由导航守卫
• 但是在 Vue3 中我们是通过返回值来控制的，不再推荐使用 next 函数，这是因为开发中很容易调用多次 next；

Vue 还提供了很多的其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能： https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html

完整的导航解析流程 #

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 的回调函数，创建好的组件实例会作为回调函数的参数传入。