《Vue Router实战教程》22.导航故障

欢迎观看《Vue Router 实战(第4版)》视频课程

    1. 导航故障

当使用 router-link 组件时,Vue Router 会自动调用 router.push 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面,但也有少数情况下用户将留在同一页面上:

  1. 用户已经位于他们正在尝试导航到的页面
  2. 一个导航守卫通过调用 return false 中断了这次导航
  3. 当前的导航守卫还没有完成时,一个新的导航守卫会出现了
  4. 一个导航守卫通过返回一个新的位置,重定向到其他地方 (例如,return '/login')
  5. 一个导航守卫抛出了一个 Error

如果我们想在一个导航完成后做一些事情,我们需要一个在调用 router.push 后进行等待的方法。想象一下,我们有一个移动手机菜单,它允许我们进入不同的页面,而我们只想在导航到新页面后隐藏菜单,我们可能想这样做:

router.push('/my-profile')

this.isMenuOpen = false

但是这样做会马上关闭菜单,因为 导航是异步的,我们需要 await router.push 返回的 promise :

await router.push('/my-profile')

this.isMenuOpen = false

现在,一旦导航完成,菜单就会关闭,但如果导航被阻止,它也会关闭。我们需要一种方法来检测我们是否真的改变了页面。

      1. 检测导航故障

如果导航被阻止,导致用户停留在同一个页面上,由 router.push 返回的 Promise 的解析值将是 Navigation Failure。否则,它将是一个 falsy 值(通常是 undefined)。这样我们就可以区分我们导航是否离开了当前位置:

const navigationResult = await router.push('/my-profile')

if (navigationResult) {

// 导航被阻止

} else {

// 导航成功 (包括重新导航的情况)

this.isMenuOpen = false

}

Navigation Failure 是带有一些额外属性的 Error 实例,这些属性为我们提供了足够的信息,让我们知道哪些导航被阻止了以及为什么被阻止了。要检查导航结果的性质,请使用 isNavigationFailure 函数:

import { NavigationFailureType, isNavigationFailure } from 'vue-router'

// 试图离开未保存的编辑文本界面

const failure = await router.push('/articles/2')

if (isNavigationFailure(failure, NavigationFailureType.aborted)) {

// 给用户显示一个小通知

showToast('You have unsaved changes, discard and leave anyway?')

}

TIP

如果你忽略第二个参数: isNavigationFailure(failure),那么就只会检查这个 failure 是不是一个 Navigation Failure。

      1. 全局导航故障

你可以用 router.afterEach() 导航守卫检测全局导航故障:

router.afterEach((to, from, failure) => {

if (failure) {

sendToAnalytics(to, from, failure)

}

})

      1. 鉴别导航故障

正如我们在一开始所说的,有不同的情况会导致导航的中止,所有这些情况都会导致不同的 Navigation Failure。它们可以用 isNavigationFailure 和 NavigationFailureType 来区分。总共有三种不同的类型:

aborted:在导航守卫中返回 false 中断了本次导航。

cancelled: 在当前导航完成之前又有了一个新的导航。比如,在等待导航守卫的过程中又调用了 router.push。

duplicated:导航被阻止,因为我们已经在目标位置了。

      1. 导航故障的属性

所有的导航失败都会暴露 to 和 from 属性,以反映失败导航的当前位置和目标位置:

// 正在尝试访问 admin 页面

router.push('/admin').then(failure => {

if (isNavigationFailure(failure, NavigationFailureType.aborted)) {

failure.to.path // '/admin'

failure.from.path // '/'

}

})

在所有情况下,to 和 from 都是规范化的路由地址。

      1. 检测重定向

当在导航守卫中返回一个新的位置时,我们会触发一个新的导航,覆盖正在进行的导航。与其他返回值不同的是,重定向不会阻止导航,而是创建一个新的导航。因此,通过读取路由地址中的 redirectedFrom 属性,对其进行不同的检查:

await router.push('/my-profile')

if (router.currentRoute.value.redirectedFrom) {

// redirectedFrom 是解析出的路由地址,就像导航守卫中的 to和 from

}

相关推荐
纪元A梦1 小时前
华为OD机试真题——荒岛求生(2025A卷:200分)Java/python/JavaScript/C/C++/GO最佳实现
java·c语言·javascript·c++·python·华为od·go
苹果酱05671 小时前
iview 表单验证问题 Select 已经选择 还是弹验证提示
java·vue.js·spring boot·mysql·课程设计
Jiaberrr2 小时前
uniapp app 端获取陀螺仪数据的实现攻略
前端·javascript·vue.js·uni-app·陀螺仪
MINO吖2 小时前
项目改 pnpm 并使用 Monorepo 发布至 npm 上
前端·npm·node.js
源码云商3 小时前
基于 SpringBoot + Vue 的校园管理系统设计与实现
vue.js·spring boot·后端
几度泥的菜花3 小时前
Vue 项目中二维码生成功能全解析
javascript·vue.js·ecmascript
筱歌儿4 小时前
小程序问题(记录版)
前端·小程序
火龙谷5 小时前
【爬虫】码上爬第6题-倚天剑
开发语言·javascript·爬虫
Jinuss5 小时前
源码分析之Leaflet中的LayerGroup
前端·leaflet
赶飞机偏偏下雨5 小时前
【前端笔记】CSS 选择器的常见用法
前端·css·笔记