如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
全局前置守卫
const router = createRouter({ ... }) router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false })
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数：
可以返回的值如下:
- false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。
router.beforeEach(async (to, from) => { if ( // 检查用户是否已登录 !isAuthenticated && // ❗️ 避免无限重定向 to.name !== 'Login' ) { // 将用户重定向到登录页面 return { name: 'Login' } } })
全局后置守卫
可以使用 router.afterEach() 注册一个全局后置守卫，和其他守卫(包括组单个路由独享的守卫以及组件中的守卫)不同的是，全局后置守卫不会接受 next() 函数，也不会改变导航本身；
router.afterEach((to, from) => { // 函数处理代码 })
全局解析守卫
2.5.0 新增。在2.5.0+你可以使用 router.beforeResolve() 注册一个全局解析守卫。
应用场景
Vue Router 提供的导航守卫主要用来通过跳转或者取消跳转的方式来守卫导航；一个简单的例子：从一个界面跳转到另一个新的界面中，如果需要满足特定的条件才能发生跳转，这时候就需要用到导航守卫(钩子函数)，比如：从商品界面需要跳转到购物车界面，在这个过程中需要用户的登录状态，这样就可以在特定的导航钩子函数中进行判断，跳转还是取消跳转；主要用于登录拦截判断。
