持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

1.什么是Vue路由导航守卫?

官网:router.vuejs.org/zh/guide/ad…

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

导航守卫分为全局守卫,其中包括全局前置守卫,全局后置守卫,全局解析守卫,还有独享守卫,组件守卫等等

如果说拦截器是兢兢业业端着茶缸,登记每一个进出小区的门卫大爷,那么我愿称导航守卫为一群训练有素的的巡逻保安,

接下来谈下常用的两种守卫

1.全局前置守卫beforeEach

路由跳转之前, 会触发一个函数(全局前置守卫)

应用场景:权限控制───由全局前置守卫来决定是否放行

基本的语法

const router = createRouter({ ... })
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

全局前置守卫里面有三个参数,其含义分别是

• to: 向那个路径而去
• from: 从那个路径而来
• next: 函数, 是否放行
• next(false) //不放行
• next() //放行 //例如:强制跳转到 /find页面
• next('/find')

注意:需要跳转时一定要调next(), 才会跳转下一页 具体用法示例:

const islogin = false    //注册全局守卫
router.beforeEach((to, from, next) => {
  if (!islogin && to.path === '/my') {
    alert('请先登录后跳转!')
    return next(false)
    // return next('/find')  //未登录强制跳转某页面
  }
  next()//放行
})

2.全局后置守卫afterEach

全局后置守卫不会改变导航本身,只是再跳转之后做判断

应用场景:跳转后的页面进行例如滚动条回调0 0 位置、更新页面title、懒加载结束等

基本的语法

router.afterEach((to, from) => {
  // ...
})

注意:afterEach不接收第三个参数 next 函数 具体场景示例:

//后置导航守卫
router.afterEach(() => {
  //进度条结束
  NProgress.done()
})