vue-router导航解析流程

一、假设条件：A页面进入B页面

• 1. 导航被触发
• 2. 离开A页面组件里的beforeRouteLeave守卫
• 3. 调用全局的beforeEach守卫
• 4. 如果存在复用组件，则调用beforeRouteUpdate守卫
• 5. 调用路由配置的beforeEnter守卫
• 6. 解析异步路由组件
• 7. 被激活的B页面组件里的beforeRouteEnter守卫
• 8. 调用全局的beforeResolve守卫
• 9. 导航被确认
• 10. 调用全局的afterEach钩子
• 11. DOM更新
• 12. 调用beforeRouteEnter守卫中传给next的回调函数

import Vue form 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Index = ()=> import('./index.vue');
const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
    // 路由配置守卫
    beforeEnter: (to, from, next) =>{
        next();
    },
  },
];
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
  // 登录状态判断等
  next();
});
router.beforeResolve((to, from, next) => {
  next();
});
router.afterEach((to, from) => {
  
});

export default router;

export default {
  data(){
    return {
    
    }
  },
  // 子组件守卫
  beforeRouteLeave(to, from, next) {
    next(()=>{
    	// 回调函数
    });
  },
  beforeRouteEnter(to, from, next) {
    next();
  },
  beforeRouteUpdate(to, from, next) {
    next();// 复用组件守卫
  },
}

总结：

• 组件实例的导航守卫：beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate
• 全局守卫：beforeEach、beforeResolve、afterEach
• 路由配置守卫：beforeEnter