欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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();
    }
});

kkb第二节课程

 

2、组件内部的守卫

kkb第二节课程

 

kkb第二节课程

路由触发的顺序

  • 导航被触发
  • 调用全局的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: '找不到该页'});