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