v-router的导航守卫

最新推荐文章于 2024-08-01 14:16:04 发布

原创最新推荐文章于 2024-08-01 14:16:04 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

实习日记专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了Vue-router的导航守卫机制，包括全局守卫、路由独享守卫及组件内守卫的使用场景与实践，旨在帮助开发者有效管理页面导航，实现数据同步更新。

前言

最近实现一个功能要用到路由的导航守卫，监听编辑页面data中img数据的变化，并且将其更新到个人中心页面，实现头像更新效果。我最开始的想法是将编辑页面的img信息存入localstorage，然后从编辑页面返回到个人中心页面时直接在个人中心页面显示更新后的头像。但是这个方案存在一个问题就是页面返回不会更新页面，不会执行mounted中的内容。

正文

leader给的一个解决方法就是用的导航守卫。所以正文就记录一下导航首位的知识。
vue官网对导航首位的解释如下：vue-router导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
全局守卫有三个

全局前置守卫router.beforeEach
全局解析守卫routerbeforeResolve
全局后置钩子beforeEnter
路由独享守卫
是在路由配置上直接定义beforeEnter,这个守卫与全局前置守卫的方法参数相同。
组件内的守卫
beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave
附上官网的解释：

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。所以一般通过传一个回调给next来访问组件实例。官网示例如下：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

完整的导航解析流程附上官网截图

后记

感觉对于导航，要想好好理解还需要多用多看文档，路漫漫其修远兮，加油！