路由守卫钩子函数

一丶全局守卫

全局守卫守卫所有的路由,进入每一个页面都会触发,在生命周期beforCreate之前

//不能直接导出router实例,需要使用变量接收一下
var router = new Router({
  routes: [
    {
      path:"/login",
      component:login,
      name:"登录页"
    },
    {
      path:"/index",
      component:index
    }
  ]
});

//然后设置全局守卫
//to->前往的路由信息;from->从哪里来的路由信息;next()是否允许访问
//to/from 其实和route差不多,to/from里面放的也是路由信息
router.beforeEach((to,from,next) => {
    //(我自己设的,这面是你自己的处理逻辑)
    
    //如果访问地址是登录页,允许访问
  if(to.path === "/login"){
    next();
    return;
  };
    //用户登陆后在本地储存了一个判断是否登录的标志
  var isLogin = localStorage.getItem("isLogin");
    //如果已经登录就允许跳转
  if(isLogin){
    next();
    return;
  };
    //没有登录就强制跳转登录页
  next("/login");
});

全局离开守卫(一般用不到)

router.afterEach((to,from)=>{})

二丶路由独享守卫

路由独享守卫守护一个路由,触发在全局守卫之后,在生命周期beforCreate之前

写在一个路由的后面

var router = new Router({
  routes: [
    {
      path:"/movie",
      component:movie,
      name:"电影列表页",
        //路由独享守卫,参数与全局守卫一样
      beforeEnter(to,from,next){
          //获取本地储存的用户类型(我自己设的,这面是你自己的处理逻辑)
        var type=localStorage.getItem("type");
          //如果用户类型为1就允许登录,否则就强制返回首页
        if(type == "1"){
          next()
        }else{
          next('/index/home');
        }
      }
    }
  ]
});

三丶组件内部守卫

写在组件内部,与data/methods等平级

export default {
  data(){ 
    return {
      detail:{}
    }
  },
    //进入之前:在全局守卫/路由独享守卫之后,在生命周期beforCreate之前
    //注意:beforeRouteEnter比beforeCreate还要早触发，所以它里面没有this,如果你要使用this.$route,那么用to/from代替
  beforeRouteEnter(to,from,next){
    if(from.path === "/movie"){
      next();
    }else{
      next("/index/home");
    }
  },
  //路由更新守卫:当组件内子路由发生变化时，会出发该导航守卫。
  //比如:我在"/movieDetail/1"跳转至"/movieDetail/2" 地址后面的数字是我们传入的参数为了控制页面展示数据
  //注意:组件内子路由的变化不会再次触发生命周期mounted
  beforeRouteUpdate(to,from,next){
	//里面是发生变化时的处理逻辑
  },
  //路由离开守卫(一般不用)
  beforeRouteLeave(to,from,next){
    next()
  }
  
}

知识点:组件内部的data不能使用json直接声明,要用函数的形式return出来
因为组件是可以复用的,我们期望同一组件在不同地方调用后,他们的数据是不互相关联的,保持各自独立,使用json格式直接声明会导致组件在不同地方调用,他们创建的数据却都指向同一储存地址(复杂数据类型与基础数据类型储存的不同),使用函数return会在调用组件时创建一个独立的空间来储存这个return的新的数据对象,就保持了同一组件多次调用数据相互独立,不会互相影响