[JavaScript知识库]Vue路由守卫

路由前置守卫

在路由对象上使用固定方法beforeEach
场景: 当你要对路由权限判断时

router.beforeEach((to, from, next)=>{
//路由跳转"之前"先执行这里, 决定是否跳转
})
// 参数1: 要跳转到的路由 (路由对象信息)    目标
// 参数2: 从哪里跳转的路由 (路由对象信息)  来源
// 参数3: 函数体 
next()才会让路由正常的跳转切换, 
next(false)在原地停留, 
next("强制修改到另一个路由路径上")
 注意: 如果不调用next, 页面留在原地

例子: 判断用户是否登录, 是否决定去 /my

const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

后置守卫

router.afterEach(function() {
  NProgress.done() // 关闭进度条
})