vue路由守卫

全局守卫

router.beforeEach((to,from,next)=>{
  //alert("还没有登录，请先登录！");
  //next();
  //console.log(to);

  //判断store.gettes.idLogin === false
  if(to.path == "/Login" || to.path == "/Register"){
    next();
  }else{
    alert('还没有登录，请先登录！');
    next('/Login');
  }
})

路由独享守卫

{path:'/Admin', name:'adminLink', component:Admin, beforeEnter:(to, from, next)=>{
    //路由独享守卫
    //判断store.gettes.idLogin === false
        // if(to.path == "/Login" || to.path == "/Register"){
        //   next();
        // }else{
        //   alert('还没有登录，请先登录！');
        //   next('/Login');
        // }
    }},

组件内的守卫

<template>
  <h1>Admin</h1>
</template>

<script>
    export default {
      data(){
          return{
            name:"Henry"
          }
      },
      // beforeRouteEnter:(to, from, next)=>{
      //   //进入组件之前调用 beforeRouteEnter和beforeRouteLeave只能二选一调用
      //   // alert("Hello"+this.name); //这里的this.name是拿不到内容的，需要用next回调函数去使用才能正常
      //   // next();
      //
      //   next(vm => {
      //     alert("Hello"+vm.name);
      //   })
      // },
      beforeRouteLeave:(to, from, next) => {
        if(confirm("确定离开吗？") == true){
          next();
        }else{
          next(false);
        }
      }
    }
</script>