VUE路由导航守卫

今天我们来学习一下VUE路由导航守卫的相关内容。

• 守卫作用

当我们路由切换到一个组件里面，如果没有权限，不让进入，有权限可以进入

• 组件内部守卫

1.beforeRouteEnter(to,from,next)
当进入组件前 执行函数
// to 去哪个路由
// from 从哪个路由
// next() true 允许进入 / false 不允许 / '/user' 进入user地址
// beforeRouteEnter守卫不能访问this，通过 `vm` 访问组件实例 next(vm=>{})
2.beforeRouteLeave(to,from,next)
当离开组件前 执行函数
3.beforeRouteUpdate
当组件更新的时候   

• 路由独享组件

beforeEnter(to,from,next)

• 全局守卫

组件内部，独享，都是对某一个组件起作用，对每一个组件都能守卫到

const router = new Router();

export default router;
// 每个页面都守卫，按需守卫
// 路由meta信息 requireAuth（需要权限） 页面才守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    console.log("我要进入到", to.name);
    // 判断是否登录
    if (isLog) {
      next(true)
    } else {
      // 如果没有登录跳转login 后面加一个条件redirect 等于要去的页面的地址 （方便登录成功后返回原页面）
      next('/login?redirect=' + to.path)
    }
  } else {
    next();
  }
})

• 路由包含的信息$route

// fullpath 全地址
// path 路由地址
// params 路由的参数 
// query 问号后查询的参数
// name 路由名称
// meta 路由元信息，标识路由是否需要全局守卫

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天