-
-
Notifications
You must be signed in to change notification settings - Fork 5k
docs(zh): translate navigation-failures.md to chinese. #3416
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
# 导航故障 | ||
|
||
> 3.4.0中新增 | ||
|
||
::: tip 译者注 | ||
*导航故障*,或者叫*导航失败*,表示一次失败的导航,原文叫 navigation failures,本文统一采用*导航故障*。 | ||
::: | ||
|
||
当使用 `router-link` 组件时,Vue Router 会自动调用 `router.push` 来触发一次导航。 虽然大多数链接的预期行为是将用户导航到一个新页面,但也有少数情况下用户将留在同一页面上: | ||
|
||
- 用户已经位于他们正在尝试导航到的页面 | ||
- 一个[导航守卫](./navigation-guards.md)通过调用 `next(false)` 中断了这次导航 | ||
- 一个[导航守卫](./navigation-guards.md)抛出了一个错误,或者调用了 `next(new Error())` | ||
|
||
当使用 `router-link` 组件时,**这些失败都不会打印出错误**。然而,如果你使用 `router.push` 或者 `router.replace` 的话,可能会在控制台看到一条 _"Uncaught (in promise) Error"_ 这样的错误,后面跟着一条更具体的消息。让我们来了解一下如何区分*导航故障*。 | ||
|
||
::: tip 背景故事 | ||
在 v3.2.0 中,可以通过使用 `router.push` 的两个可选的回调函数:`onComplete` 和 `onAbort` 来暴露*导航故障*。从版本 3.1.0 开始,`router.push` 和 `router.replace` 在没有提供 `onComplete`/`onAbort` 回调的情况下会返回一个*Promise*。这个*Promise*的 resolve 和 reject 将分别用来代替 `onComplete` 和 `onAbort` 的调用。 | ||
::: | ||
|
||
|
||
## 检测导航故障 | ||
|
||
*导航故障*是一个 `Error` 实例,附带了一些额外的属性。要检查一个错误是否来自于路由器,可以使用 `isNavigationFailure` 函数: | ||
|
||
```js | ||
import VueRouter from 'vue-router' | ||
const { isNavigationFailure, NavigationFailureType } = VueRouter | ||
|
||
// 正在尝试访问 admin 页面 | ||
router.push('/admin').catch(failure => { | ||
if (isNavigationFailure(failure, NavigationFailureType.redirected)) { | ||
// 向用户显示一个小通知 | ||
showToast('Login in order to access the admin panel') | ||
} | ||
}) | ||
``` | ||
|
||
::: tip | ||
如果你忽略第二个参数:`isNavigationFailure(failure)`,那么就只会检查这个错误是不是一个*导航故障*。 | ||
::: | ||
|
||
## `NavigationFailureType` | ||
|
||
`NavigationFailureType` 可以帮助开发者来区分不同类型的*导航故障*。有四种不同的类型: | ||
|
||
- `redirected`:在导航守卫中调用了 `next(newLocation)` 重定向到了其他地方。 | ||
- `aborted`:在导航守卫中调用了 `next(false)` 中断了本次导航。 | ||
- `cancelled`:在当前导航还没有完成之前又有了一个新的导航。比如,在等待导航守卫的过程中又调用了 `router.push`。 | ||
- `duplicated`:导航被阻止,因为我们已经在目标位置了。 | ||
|
||
## *导航故障*的属性 | ||
|
||
所有的导航故障都会有 `to` 和 `from` 属性,用来表达这次失败的导航的当前位置和目标位置。 | ||
|
||
```js | ||
// 正在尝试访问 admin 页面 | ||
router.push('/admin').catch(failure => { | ||
if (isNavigationFailure(failure, NavigationFailureType.redirected)) { | ||
failure.to.path // '/admin' | ||
failure.from.path // '/' | ||
} | ||
}) | ||
``` | ||
|
||
在所有情况下,`to` 和 `from` 都是规范化的路由位置。 |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.