vue路由守卫

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

组件内的路由守卫, 路由生命周期函数, 路由钩子

• to 是路由跳转之后的信息对象
• from 是分别跳转之前的信息对象
• next()调用后才可以进入下一个钩子函数

beforeRouteEnter 在路由进入之前, 当前组件没有加载, 也就没有this

beforeRouteEnter (to, from, next) {
      console.log("路由申请加载About组件", to, from)
      // next是允许路由跳转的回调, 调用后进入下一步,否则禁止路由跳转
      // next()
      // if(localStorage.getItem("token")){
      //   next()  如果已登录, 进入这一页
      // }else{
      //   this.$router.push("/login")  // 未登录则跳转到登录页
      // }
      // 在路由进入之前, 当前组件没有加载, 也就没有this, 
      console.log(this) // undefined
      // 如果真的想在这里调用this,可以在next函数的参数回调中调用, next函数的回调参数会在created生命周期之后执行
      next(self=>{
        console.log(self)
      })
    },

beforeRouteUpdate 在路由数据更新之前, 当前组件不会重新初始化 可以使用this

    beforeRouteUpdate(to, from, next){
      // 如果当前已经是about页, 点击路由跳转依然要跳到about, 并且路由地址后传的参数变化时, 会调用路由更新的守卫,  一般在搜索页, 列表页使用
      console.log("申请路由更新About组件的数据", to, from)
      // 允许路由更新
      next()
      // 拿到路由中新的数据, 进行渲染
      this.count = to.query.type
    },

beforeRouteLeave 在离开之前被调用, 可以使用this

    beforeRouteLeave (to, from, next) {
      console.log("申请离开About组件")
      next()  // 允许离开当前组件
    },

在路由配置对象中,设置单个路由守卫

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    //在路由配置对象中,设置单个路由守卫
    beforeEnter: (to, from, next) => {
      console.log("申请进入主页")
      next()
    }
  },
]