vue项目1-pizza点餐系统5-全局守卫
一、导航守卫描述
当问我们点击主页、菜单等非登陆和注册按钮都会提示先登陆然后跳转到登陆界面。
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>