一、导航守卫描述
当问我们点击主页、菜单等非登陆和注册按钮都会提示先登陆然后跳转到登陆界面。
1、在main.js中引入全局守卫
//全局守卫
//to是要进入那个路由,from是从那个路由出来,next是个函数,是否展示路由界面
router.beforeEach((to,from,next) =>{
// alert("还没有登录,请先登录");
// next();
//判断store.gettes.isLogin === false 这是vuex中的内容
//判断跳转的路由是否是登陆和注册,如果是就显示路由界面,不是就跳转到登陆界面
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert("还没有登录,请先登录");
next("/login");
}
})
2、路由独享守卫
在index.js中的需要加守卫配置中,加入
{path: '/admin', name: 'adminLink', component: Admin,beforeEnter:(to,from,next) => {
//路由独享守卫
alert("得登陆状态,不能访问此页面");
next(false);//false不能进入管理界面,空可以进入管理界面
}},
3、组件内守卫
在需要的设置的组件中,例如餐单组件中。
<script>
export default {
//组件内守卫,next回调,拿不到data属性,跟执行顺序有关
data(){
return{
name:"Henry"
}
},
// beforeRouteEnter:(to,from,next)=>{
// // alert("Hello "+this.name);//结果是:Hello undefined 因为在执行beforeRouteEnter方法时并没有把data数据渲染出来
// //next()方法中提供了回调
// next(vm =>{
// alert("Hello "+vm.name);
// })
// }
beforeRouteLeave(to,from,next){
//离开时弹出“确定离开吗”,确定就离开
if(confirm("确定离开吗")==true){
next()
}else{
next(false)
}
}
}
</script>