Skip to content

Commit 306602d

Browse files
authored
docs(ja): translate navigation-failures.md to japanese. (#3572)
1 parent 3f3c3c9 commit 306602d

File tree

2 files changed

+63
-1
lines changed

2 files changed

+63
-1
lines changed

docs/.vuepress/config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,8 @@ module.exports = ctx => ({
241241
'/ja/guide/advanced/transitions.md',
242242
'/ja/guide/advanced/data-fetching.md',
243243
'/ja/guide/advanced/scroll-behavior.md',
244-
'/ja/guide/advanced/lazy-loading.md'
244+
'/ja/guide/advanced/lazy-loading.md',
245+
'/ja/guide/advanced/navigation-failures.md'
245246
]
246247
}
247248
]
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# ナビゲーションの失敗
2+
3+
> 3.4.0の新機能
4+
5+
`router-link` を使用すると、ナビゲーションを開始するためにVue Routerは `router.push` を呼び出します。ほとんどのリンクはユーザーを新しいページに移動させますが、ユーザーが同じページに留まる状況もいくつかあります。
6+
7+
- すでにユーザーが移動したいページにいる
8+
- [ナビゲーションガード](./navigation-guards.md)`next(false)` の呼び出しによって移動を中止した
9+
- [ナビゲーションガード](./navigation-guards.md)がエラーを投げた、または `next(new Error())` を呼び出した
10+
11+
`router-link` コンポーネントを使用している場合、**これらの失敗はエラーとして記録されません**。しかし、 `router.push` または `router.replace` を使用している場合は、 _"Uncaught (in promise) Error"_ に続いて具体的なメッセージがコンソールに表示されることがあります。_ナビゲーションの失敗_ を区別する方法を理解しましょう。
12+
13+
::: tip 背景
14+
v3.2.0では、router.pushの2つのオプションのコールバック( `onComplete``onAbort` )を通して _ナビゲーションの失敗_ が明らかになっていました。バージョン3.1.0以降、 `onComplete` / `onAbort` コールバックが提供されていない場合、 `router.push``router.replace`_Promise_ を返します。この _Promise_`onComplete` の代わりにResolvedとなり、 `onAbort` の代わりにRejectedとなります。
15+
:::
16+
17+
## ナビゲーションの失敗を検出する
18+
19+
_Navigation Failures_ はいくつかの追加プロパティをもつ `Error` インスタンスです。ルーターからエラーが発生したかを確認するには、 `isNavigationFailure` 関数を使用します。
20+
21+
```js
22+
import VueRouter from 'vue-router'
23+
const { isNavigationFailure, NavigationFailureType } = VueRouter
24+
25+
// 管理画面にアクセス
26+
router.push('/admin').catch(failure => {
27+
if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
28+
// ユーザーに小さな通知を表示
29+
showToast('Login in order to access the admin panel')
30+
}
31+
})
32+
```
33+
34+
::: tip
35+
`isNavigationFailure(failure)` のように2番目のパラメータを省略すると、エラーが _Navigation Failure_ かどうかのチェックのみが行われます。
36+
:::
37+
38+
## `NavigationFailureType`
39+
40+
`NavigationFailureType` は開発者がさまざまな種類の _Navigation Failures_ を区別するのに役立ちます。次の4つの種類があります。
41+
42+
- `redirected`: 別の場所にリダイレクトするために、ナビゲーションガードの中で `next(newLocation)` が呼び出された
43+
- `aborted`: ナビゲーションガードの中で `next(false)` が呼び出された
44+
- `cancelled`: 現在のナビゲーションが終了する前に、新しいナビゲーションが実行された。例:ナビゲーションガード内で待機中に `router.push` が呼び出された
45+
- `duplicated`: すでに目的の場所にいるため、ナビゲーションが妨げられた
46+
47+
## _Navigation Failures_ のプロパティ
48+
49+
全てのナビゲーションの失敗は、そのナビゲーションのターゲットと現在地を反映した `to``from` のプロパティを公開します。
50+
51+
```js
52+
// 管理画面にアクセス
53+
router.push('/admin').catch(failure => {
54+
if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
55+
failure.to.path // '/admin'
56+
failure.from.path // '/'
57+
}
58+
})
59+
```
60+
61+
全ての場合において、 `to``from` は正規化されたルートの場所です。

0 commit comments

Comments
 (0)