vue路由守卫

全局路由守卫

• 前置守卫

在进入路由之前执行

beforeEach(to,from,next){
	//to 即将要进入的目标路由对象
	//from 导航要离开的路由对象 
	//next() //这里要使用next放行 否则无法创建实例
}

//全局守卫
router.beforeEach((to, from, next)=> {
// 判断是否登录
 if(sessionstorage.getItem("isLogin") == "1") {
		next()
 }else {
 	// 如果没有登录，但是跳转登录页面也放行
	if(to.name == 'login') {
		next()
	}else {
		// 如果没有登录，也不是去登录页，就拦截，让它跳转登录页
		next('/login')
	}
 }
);

• 后置守卫

在离开路由的时候执行

afterEach(to.from){
	//
}

局部路由守卫

是在路由配置页面单独给路由配置的守卫

 export default new VueRouter({
     routes: [
         {
             path: '/',
             name: 'home',
             component: 'Home',
             beforeEnter: (to, from, next) => {
                // ...
             }
         }
     ]
 })

组件内路由守卫

写在vue文件里 跟 methods同级别书写

beforeRouterEnter(to,from,next){
	//在进入路由之前 组件实例还未渲染 所以此时this无法使用
	next() //这里要使用next放行
}
beforeRouteUpdate(to,from,next){
	//同一页面刷新不同数据时调用
}
beforeRouteLeave(to,from,next){
	//离开当年前路由页面的时候调用
}