kkb第二节课程

一、路由的守卫

1、全局守卫

beforeEach作用以及应用场景

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

例如在页面进行跳转的时候，可以进行验证，判断用户是否已经登录，没有登录的就跳到登录界面去

//路由钩子
router.beforeEach((to, from, next) => {
    next();
    if(to.fullPath != '/login'){	//如果跳转的页面不是登录页，则进行拦截
    	if(cookies.get('access_token')){//判断cookie
    		next();    //如果匹配到正确跳转
    	}else{
    		next('/login');//回到登录界面
    	}
    }else{
    	next();
    }
});

 

2、组件内部的守卫

 

路由触发的顺序

• 导航被触发
• 调用全局的beforeEach守卫
• 在重用的组件里面调用beforeRouterUpdate守卫
• 在路由配置里面调用beforeEnter
• 在被激活的组件里面调用beforeRouteEnter
• 调用全局的beforeResolve守卫（2.5+）
• 导航被确认
• 调用全局的afterEach钩子
• 触发DOM更新

 

二、异步组件

也可以叫做懒加载，需要的时候才加载

{
    path:'/login',
    component:()=>import('./components/Login')//也可以是require
}

应用场景

404页面

//此种是用在动态路由的方式
const Err404 = resolve => require(['@modules/baselayout/views/Err404'], resolve) // 错误页面


调用
aRouterList.push({ path: '/nofound', component: Err404, name: '找不到该页'});

aRouterList.push({ path: '/nofound', component: Err404, name: '找不到该页'});