kkb第二节课程
程序员文章站
2022-07-12 12:58:04
...
一、路由的守卫
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: '找不到该页'});
上一篇: 第二节课url路由
下一篇: LeetCode 49.字母异位词分组