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>