博客

1. 在访问一个页面的时候 也就是在进行路由跳转的时候，把这个跳转拦下来 做一些判断或者操作 然后来执行是继续访问这个页面还是执行别的操作

路由的导航守卫又叫 路由的生命周期函数 也叫 路由的钩子函数

路由的导航守卫 有三种六个

第一种 ：全局守卫  全局守卫写在 router/index.js中，守卫所有的页面
有两个：
beforeEach 路由跳转之前
afterEach 路由跳转之后


// router.beforeEach((to, from, next) => {
//   // console.log("全局守卫");
//   // next(); //放行路由
//   if (localStorage.getItem("username")) {
//     next();
//     //如果本地存储中有 username证明已经登陆了 就执行下一步
//   } else {
//     if (to.path == "/login") {
//       next();
//     } else {
//       next("/login");
//     }
//     //为了防止死循环 如果是要跳转login 就放行 就不会死循环了，如果不是login就跳转到login
//   }
// });
//路由跳转之前执行



第二种：组件级守卫 要守卫哪个页面就写在哪个组件里
beforeRouteEnter 页面进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 页面离开之后
这三个 导航守卫 是选项对象 跟data同级

 beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("username")) {
      next();
    } else {
      next("/login");
    }
  },
  //守卫这个页面（路由跳转之前） 如果登陆了就继续访问 没有就跳转登录页面


第三种：单个路由规则独享的守卫 放在要守卫的路由规则里
beforeEnter

 beforeEnter(to, from, next) {
          if (localStorage.getItem("username")) {
            next();
          } else {
            next("/login");
          }
        },
        //单个路由规则独享的守卫 跟组件级守卫功能一样 但是建议用组件级守卫


这些路由守卫都有三个参数 to from next
代表到哪儿去 从哪儿来 下一步