路由守卫

1.全局路由守卫

有三种路由钩子：beforeEach、beforeResolve、afterEach

beforeEach ：是路由跳转前，一共有三个参数（to,from,next)

//路由跳转前   可以用来进行登录的路由守卫的判断
router.beforeEach((to, from, next) => {
  to     //到哪里去
  from   //从哪里来
  next();//执行下一步，跳转到哪一个路由，如果没有next，就不会执行下一步
});

beforeResolve ：是路由跳转中，一共有三个参数（to,from,next)

//路由跳转前   几乎用不到
router.beforeResolve((to, from, next) => {
  to     //到哪里去
  from   //从哪里来
  next();//执行下一步，跳转到哪一个路由，如果没有next，就不会执行下一步
});

afterEach ：是路由跳转后，一共有俩个参数（to,from)

//路由跳转之后
router.afterEach((to, from) => {
  to     //到哪里去
  from   //从哪里来
});

beforeEach和beforeResolve的区别：

执行的时机不同： beforeEach是路由被解析之前执行 beforeResolve是解析之后执行执行的顺序不同： beforeEach要比beforeResolve先执行

2.路由独享守卫

路由独享守卫就是在路由内设置的单个路由守卫

例如：在登录之前不能进入首页

 {
    path: "/",
    name: "home",
    component: HomeView,
    meta: {
      title: "首页",
    },
    beforeEnter(to, from, next) {
      // 获取登录之后存储在本地存储的token值
      let token = localStorage.getItem("token");
      //判断本地存储有没有token值
      if (token) {
        //有token值的话进入首页
        next();
      } else {
        //如果没有token值则跳转至登录页面先进性登录
        next("/login");
      }
    },
  },

3.组件内部守卫

有三个路由的生命周期：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter：进入组件之前的生命周期

export default {
  beforeRouteEnter(to, from, next) {
    next()
  }
}

beforeRouteUpdate：组件发生变化的生命周期，当路由发生变化时会触发，重新调用接口

export default {
  beforeRouteUpdate(to, from, next) {
    next()
  }
}

beforeRouteLeave：路由离开的生命周期

export default {
  beforeRouteLeave(to, from, next) {
    next()
  }
}

vue 路由守卫