Vue 导航守卫

Posted 2023-03-14

参考技术A

  什么是导航守卫？ 顾名思义，导航守卫的意思就是监听每一个路由跳转的过程，然后提供一些钩子函数让你有机会在跳转的过程中植入相关信息

   ①：全局守卫（全局前置守卫、全局解析守卫、全局后置钩子）
   ②：路由守卫（路由独享守卫）
   ③：组件内守卫（加载、更新、离开）

  (1)：全局前置守卫 router.beforeEach
    当一个导航触发时，全局前置守卫按照创建顺序调用。 守卫是异步解析执行 ，此时导航在所有守卫 resolve 完之前一直处于 等待中

  (2):全局解析守卫 router.beforeResolve
    全局解析守卫类似于全局前置守卫，每次导航时都会触发， 但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

  (3)：全局后置钩子 router.afterEach
    与守卫不同，后置守卫钩子不会接受 next 函数，也不会改变导航本身

  (1)：路由独享守卫 beforeEnter
    路由独享守卫只在进入路由时触发，参数改变时不会触发，它们只有在从一个不同的路由导航时，才会被触发