Vue 路由钩子

Posted 2022-12-07 哈娄

路由钩子分为三种

• 全局钩子： beforeEach、 afterEach、beforeResolve
• 单个路由里面的钩子：  beforeEnter

• 组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局钩子

1. beforeEach： 全局前置守卫 进入路由之前
2. beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3. afterEach 全局后置钩子 进入路由之后

路由的三个参数

• to: 将要进入的路由对象

• from:将要离开的路由对象
• next: 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)

    // main.js 入口文件
    import router from './router'; // 引入路由
    router.beforeEach((to, from, next) =>  
      next();
    );
    router.beforeResolve((to, from, next) => 
      next();
    );
    router.afterEach((to, from) => 
      console.log('afterEach 全局后置钩子');
    );

路由独享守卫

为某些路由单独配置守卫

const router = new VueRouter(
 routes: [
   
      path: '/test',
      component: Test,
      beforeEnter: (to, from, next) =>  
      // 参数用法与全局的钩子都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
    
   
 ]
)

路由组件内的守卫

• beforeRouteEnter 进入路由前
• beforeRouteUpdate (2.2) 路由复用同一个组件时
• beforeRouteLeave 离开当前路由时

触发钩子的顺序

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

1. beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
2. beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
3. beforeEnter: 路由独享守卫
4. beforeRouteEnter: 路由组件的组件进入路由前钩子。
5. beforeResolve:  路由全局解析守卫
6. afterEach:路由全局后置钩子
7. beforeCreate:组件生命周期，不能访问this。
8. created:组件生命周期，可以访问this，不能访问dom。
9. beforeMount:组件生命周期
10. deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
11. mounted:访问/操作dom。
12. activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
13. 执行beforeRouteEnter回调函数next。