vue路由守卫

路由守卫分为全局守卫、组件独享守卫、组件内守卫

1. 全局守卫：router.beforeEach((to, from, next) => {}),主要用来在路由跳转之前判断该路径是否需要登录权限，需要的话就跳转到登录页面

在router用`meta：{requireAuth: true/false}`来配置是否需要登录
router.beforeEach((to, from, next) => {
  console.log(to,from )
  if(to.matched.some(record => record.meta.requireAuth)) {//判断该路由是否需要登录权限
    if(getToken()){//判断token是否存在（登录时存的token）
      if(to.path == '/login'){
        removeToken();
        window.location.reload();
      }else{
        next()
      }
    }else{
      next({
        path: '/login',
        query: {
          redirect: to.fullPath,//将跳转的路由作为path参数，登录后跳转到该路由
        }
      })
    }
  }else{
    next();
  }
})

2. 组件内的守卫

当某个组件有特殊情况时，可以在这两个守卫内处理

• 到达组件时：beforeRouterEnter:(to, from, next)=>{}
• 离开组件时：beforeRouterLeave:(to, from, next)=>{}
• 切换子路由时：beforeRouterUpdate

3. 路由独享的守卫

beforeEnter: (to, from, next)=>{}用法和全局守卫一样，区别是这个写在路由对象里，让他只在这个路由下起作用