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

Question

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

私は何をすべきかについては

Answer 1

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

最も一般的なのは、ナビゲーションの前に経路が一致するかどうかをチェックし、そうでなければが見つかりませんページです。

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

JSFiddleを参照してください。ルート宣言で

Answer 2

私はすべてのコンポーネントおよびI App.vueの取付けフック親のdivにhttp-foundのクラスを与えている任意のhttp-foundのクラスを持つ要素でない場合がある場合、私はjQueryのまたはJavaScriptを使用して確認してください404ページにリダイレクトします。

App.vue

mounted(){ 
    if(!$('.http-found')){ 
    this.$router.push('/404') 
    } 
} 

Answer 3

、私はこれを追加する：ユーザーが任意のルートと一致していないパスにナビゲートされている場合、それは「404」にリダイレクトされることを意味します

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

ルートには、「見つからない」メッセージが含まれます。

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

あなたがブログを作成した場合、あなたはこのルートを持っているかもしれません：提供スラグは、実際に任意のブログ記事を取得していない場合でも、解決します

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

。アプリケーションは、ポストが見つからなかったと判断したときに、Vueのコンポーネントのコンテキストではない場合は、これを処理するために、

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

または

return router.push('/404') 

を行います。

ただし、見つからない応答を処理する正しい方法は、エラーページを提供するだけではなく、実際のHTTP 404応答をブラウザに提供することです。ユーザーがすでにシングルページアプリケーションの中にいる場合、これを行う必要はありませんが、ブラウザーが最初のリクエストとしてそのブログポストをヒットした場合、サーバーは実際に404コードを返す必要があります。