vue-全局导航守卫/路由守卫/组件内守卫

还有路由独享的守卫 和 组件内的守卫

1-1，beforeEach(to, from, next) {} – 前置守卫guard

必须调用next()，调用了才会执行下一个勾子
路由切换之前触发
设置切换路径时的路由拦截：
1，给需要登录验证的路由设置meta: {requireAuth: true},
2，写路由守卫函数beforeEach()

router.beforeEach((to, from, next) => {
//to from表示将要进入和将要离开的路由对象，路由对象指的是平时通过this.$route获取到的路由对象
//next:Function是函数，且必须调用，否则不能进入路由（页面空白），
//next(false)表示取消进入路由，url地址重置将为from的路由地址  
  document.title = to.meta.title;//给当前路由的页面地址添加当前路由的title属性
  if (to.meta.requireAuth) { //如果当前路由的进入需要进行登录验证
    if (getCookie('X-Access-Token')) { //如果token存在
      next();//直接调用表示进入该路由to
    }
    else { //如果token不存在直接定位到登录页面
      next({
      //可以这样跳转：next('path地址')或者next({path:''})或者next({name:''})
      //且允许设置诸如 replace: true、name: 'home' 之类的选项
          path: '/Login',
          query: {redirect: to.fullPath}
      })
    }
  }
  else { //如果当前路由不需要验证
      next();
  }
})

//index.js
{
   path: '/permission',
   name: 'permission',
   meta: {
   	  title:'权限管理',
      requireAuth: true //表示该路由需要登录验证后才能进入，需要在切换路径跳转路由之前作判断
   },
   component: () => import('@/views/perm/permission.vue')//这样的引入写法可以实现路由按需加载/懒加载
}

1-2，beforeResolve

1-3，afterEach – 后置钩子hook

后置钩子不需要主动调用next()

router.afterEach((to,from) => {
	//路由发生跳转时，会先触发前置守卫函数，后触发后置钩子。
})

1-4，beforeEnter

还可以在路由配置时直接使用全局守卫

2，组件守卫

2-1，beforeRouteEnter(to,from,next) {}

链接参考
进入当前路由之前会触发的钩子函数【注意！！！此守卫函数触发时还无法使用this】

参考链接

 beforeRouteEnter(to, form, next) {
    next()
  },

beforeRouteEnter不能访问this如何处理？
可以通过next回调，通过vm访问组件实例：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // beforeRouteENnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例
    console.log(vm.permidata)   //vm.permidata即methods内的方法使用的this.permidata
  })
}