Skip to content
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

docs(ja): translate navigation-failures.md to japanese. #3572

Merged
merged 1 commit into from Jun 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/.vuepress/config.js
Expand Up @@ -241,7 +241,8 @@ module.exports = ctx => ({
'/ja/guide/advanced/transitions.md',
'/ja/guide/advanced/data-fetching.md',
'/ja/guide/advanced/scroll-behavior.md',
'/ja/guide/advanced/lazy-loading.md'
'/ja/guide/advanced/lazy-loading.md',
'/ja/guide/advanced/navigation-failures.md'
]
}
]
Expand Down
61 changes: 61 additions & 0 deletions docs/ja/guide/advanced/navigation-failures.md
@@ -0,0 +1,61 @@
# ナビゲーションの失敗

> 3.4.0の新機能

`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の2つのオプションのコールバック( `onComplete` と `onAbort` )を通して _ナビゲーションの失敗_ が明らかになっていました。バージョン3.1.0以降、 `onComplete` / `onAbort` コールバックが提供されていない場合、 `router.push` と `router.replace` は _Promise_ を返します。この _Promise_ は `onComplete` の代わりにResolvedとなり、 `onAbort` の代わりにRejectedとなります。
:::

## ナビゲーションの失敗を検出する

_Navigation Failures_ はいくつかの追加プロパティをもつ `Error` インスタンスです。ルーターからエラーが発生したかを確認するには、 `isNavigationFailure` 関数を使用します。

```js
import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

// 管理画面にアクセス
router.push('/admin').catch(failure => {
if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
// ユーザーに小さな通知を表示
showToast('Login in order to access the admin panel')
}
})
```

::: tip
`isNavigationFailure(failure)` のように2番目のパラメータを省略すると、エラーが _Navigation Failure_ かどうかのチェックのみが行われます。
:::

## `NavigationFailureType`

`NavigationFailureType` は開発者がさまざまな種類の _Navigation Failures_ を区別するのに役立ちます。次の4つの種類があります。

- `redirected`: 別の場所にリダイレクトするために、ナビゲーションガードの中で `next(newLocation)` が呼び出された
- `aborted`: ナビゲーションガードの中で `next(false)` が呼び出された
- `cancelled`: 現在のナビゲーションが終了する前に、新しいナビゲーションが実行された。例:ナビゲーションガード内で待機中に `router.push` が呼び出された
- `duplicated`: すでに目的の場所にいるため、ナビゲーションが妨げられた

## _Navigation Failures_ のプロパティ

全てのナビゲーションの失敗は、そのナビゲーションのターゲットと現在地を反映した `to` と `from` のプロパティを公開します。

```js
// 管理画面にアクセス
router.push('/admin').catch(failure => {
if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
failure.to.path // '/admin'
failure.from.path // '/'
}
})
```

全ての場合において、 `to` と `from` は正規化されたルートの場所です。