vue3之路由导航故障

通常一个导航守卫函数中会发生这四件事之一：
1.通过调用 return false 中断了这次导航
2.通过返回一个新的位置，重定向到其他地方 (例如，return ‘/login’)
3.正常导航到指定路由
4.抛出了一个 Error

检测导航故障

可以使用vue-router提供的一些API来检测导航故障。vue-router为路由导航异常的检测提供了isNavigationFailure函数，这个函数允许你判断一个错误是否来自于导航过程。

import  { isNavigationFailure, NavigationFailureType } from 'vue-router'  // 尝试访问某个页面  
router.push('/some-page').catch(failure => {  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {  // 导航被拦截并返回了false  console.log('Navigation aborted')  } else if (isNavigationFailure(failure, NavigationFailureType.cancelled)) {  // 在导航完成之前又产生了一次新的导航  console.log('Navigation cancelled')  } else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {  // 导航被阻止,已经在目标位置了  console.log('Navigation duplicated')  } else {  // 不是导航故障的错误，可能是其他类型的错误  console.error('Unknown error', failure)  }  
})const navigationResult = await router.push('/my-profile')if (navigationResult) {// 导航被阻止
} else {// 导航成功 (包括重新导航的情况)this.isMenuOpen = false
}

全局导航故障

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

导航故障的属性

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

// 正在尝试访问 admin 页面
router.push('/admin').then(failure => {if (isNavigationFailure(failure, NavigationFailureType.aborted)) {failure.to.path // '/admin'failure.from.path // '/'}
})

检测重定向

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

await router.push('/my-profile')
if (router.currentRoute.value.redirectedFrom) {// redirectedFrom 是解析出的路由地址，就像导航守卫中的 to和 from
}