|
| 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