路由守卫

  1. 全局路由守卫

  • 前置路由守卫: beforeEach 路由切换之前被调用

    • 全局解析守卫:beforeResolve 在每次导航时就会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后 2,解析守卫就被正确调用,如确保用户可以访问自定义 meta 属性requiresCamera  的路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
router.beforeResolve(async (to) => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

router.beforeResolve  是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

  • 后置路由守卫 :afterEach 路由切换之后被调用requiresCamera  的路由：

    2.独享路由守卫

1
2
3
4
5
6
7
8
9
10
11
const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3.组件內路由守卫 可以在组件内使用者两个钩子

  • 通过路由规则,进入该组件时被调用
1
2
3
beforeRouteEnter (to, from, next) {

}
  • 通过路由规则,离开该组件时调用
1
2
3
beforeRouteLeave (to, from, next) {

}

完整的导航解析过程

  1. 导航被触发。
  2. 在失活的组件里调用  beforeRouteLeave  守卫。
  3. 调用全局的  beforeEach  守卫。
  4. 在重用的组件里调用  beforeRouteUpdate  守卫(2.2+)。
  5. 在路由配置里调用  beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用  beforeRouteEnter。
  8. 调用全局的  beforeResolve  守卫(2.5+)。
  9. 导航被确认。
  10. 调用全局的  afterEach  钩子。
  11. 触发 DOM 更新。
  12. 调用  beforeRouteEnter  守卫中传给  next  的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由模式

  1. history 模式 /: 使用pushState和replaceState,通过这两个 API 可以改变 url 地址不发生请求,popState事件

  2. hash 模式# :

    hash 是 URL 中 hash(#)及后面的那部分,常用作锚点在页面内进行导航,改变 hash 值不会随着 http 请求发送给服务器,通过hashChange事件监听 URL 的变化,可以用他来实现更新页面部分内容的操作

文章作者: Mr. Fortunate
文章链接: https://www.fortunate.cool/2022/11/26/%E5%9B%9E%E7%9C%8B%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 fortunate！
前端 javascript 服务器
评论