vue路由全局守卫

vue路由全局守卫

//全局守卫写在main中
//router对象调用  
//.beforeEach((进入到哪一个路由,从哪一个路由离开,对应的函数)=>{}) 
router.beforeEach((to,form,next) =>{
    //如果进入到的路由是登录页或者注册页面，则正常展示
    if(to.path == '/login' || to.path == '/register' ){     
        next();
    }else if( !(localStorage.getItem('token')) ){
        alert("还没有登录，请先登录！");
        next('/login');     //转入login登录页面，登录成功后会将token存入localStorage
    }else{
        next();
    }
})

路由独享守卫：

//路由独享守卫,写在router路由中
{path:"/admin",name:"admin",component:admin,
	//beforeEnter(to,form.next)=>{判断是否登陆代码}，点击进入admin也面时，路由独享守卫启用
	beforeEnter:(to,form,next)=>{
		//alert('非登陆状态，不能访问此页面！');
		//next('/login');
		//判断是否登录  store.gettes.isLogin === false 
		if(to.path == '/login' || to.path == '/register' ){
			next();
		}else{
			alert("还没有登录，请先登录！");
			next('/login');
		}
	}
},

组件内守卫：

/*组件内守卫，写在组件中
组件内守卫使用beforeRouteEnter:(to,form,next)=>{代码}方法，
注意：该方法是在页面加载前执行。拿不到this.name的值，
利用好next的回调参数，拿到对应的内容，这个时候请使用vm.name,异步加载*/
beforeRouteEnter:(to,form,next)=>{
	// alert("hello" + this.name);
	// next();
	//to和form，可以判断要进入的路由名称，从哪个路由离开
	next(vm => {
		alert("Hello"+vm.name);
	})
}

//beforeRouteLeave:(to,form,next)=>{代码}方法，在用户离开页面前加载。
beforeRouteLeave:(to,form,next)=>{
	if(confirm("确定离开吗？") == true ){  //询问是否离开==true
		next();  //确认离开
	}else{
		next(false);  //false不离开
	}
}

后置钩子守卫：

//后置钩子守卫，不常用！没有next参数，写在main.js中
router.afterEach((to,form) => {
	alert("after Each方法")
})