web-dev-qa-db-ja.com

vue-routerを使用してvuejsで404コンポーネントを作成する方法

私はvuejsが初めてで、vueを使用した最初のプロジェクトに取り組んでいます。要求されたURLが見つからない場合、404.vueコンポーネントにどのようにルーティングするのか疑問に思っています。

何か案が？

vue.jshttp-status-code-404vue-componentvue-router
19
Kamga Simo Junior

ルート宣言で、私はこれを追加したいです：

[
  ...  
  { path: '/404', component: NotFound },  
  { path: '*', redirect: '/404' },  
  ...  
]

これは、ユーザーがどのルートとも一致しないパスにナビゲートされた場合、「not found」メッセージを含む「404」ルートにリダイレクトされることを意味します。

2つのルートに分けたのは、必要なデータが解決しない場合に、プログラムでユーザーを404ルートに誘導できるようにするためです。

たとえば、ブログを作成している場合、次のルートがあります。

{ path: '/posts/:slug', component: BlogPost }

提供されたスラッグが実際にブログ投稿を取得しない場合でも、これは解決します。これを処理するには、アプリケーションが投稿が見つからなかったと判断したときに、

return this.$router.Push('/404')

または

return router.Push('/404')

Vueコンポーネントのコンテキストにない場合。

心に留めておくべきことの1つは、見つからない応答を処理する正しい方法は、エラーページを提供するだけではないということです。実際のHTTP 404応答をブラウザに提供するようにしてください。ユーザーが既に単一ページアプリケーション内にいる場合、これを行う必要はありませんが、ブラウザーが最初の要求としてそのサンプルブログ投稿にヒットした場合、サーバーは実際に404コードを返す必要があります。

69
g-wilson

これを行うにはいくつかの方法があります。

最も一般的な方法は、ナビゲーションの前にパスがいずれかのルートに一致するかどうかを確認し、Not foundページにリダイレクトしない場合です。

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
    next('/notFound');
  } else {
    next();
  }
});

JSFiddle を参照してください。

10
Kuba Szymanowski

@ g-wilsonの回答の後、私は{ path: '*', component: NotFound }。リダイレクトを行いたくない場合に役立つかもしれません。

8
Tarasovych