ヴュー・ルータは、多くの成功なし（<code>Vue</code>と<code>Vue-Router</code> 1.0を使用して）、（404）

Question

私はrouter.beforeEachグローバルフックを使用していないページに404.htmlにリダイレクトしようとしているページが見つかりませんにリダイレクト：

router.beforeEach(function (transition) { 
    if (transition.to.path === '/*') { 
     window.location.href = '/404.html' 
    } else { 
     transition.next() 
    } 
}); 

これは、存在しないルートが挿入されたときにページ404.htmlにリダイレクトされません。空のフラグメントを与えるだけです。 some-site.com/*をハードコードすると、some-site.com/404.htmlにリダイレクトされます。

ここでは、私が見落としていることは明らかですが、私は理解できません何を出すか。

---

私が探していますが、新たなページではなく、簡単なこれらのスニペットのようにrouter.redirectを使用することによって達成することができ、別のルート、へのリダイレクトにリダイレクトであることに注意してください：

router.redirect({ 
    '*': '404' 
}) 

私router.mapに、私は次のように持つことができに対し：

router.map({ 
    '/404': { 
     name: '404' 
     component: { 
      template: '<p>Page Not Found</p>' 
     } 
    } 
}) 

Answer 1

私はあなたが下記のとおり、デフォルトルートのハンドラを使用して、アプリ外のページへそこからリダイレクトすることができるはずだと思う：上記PageNotFoundコンポーネント定義で

const ROUTER_INSTANCE = new VueRouter({ 
    mode: "history", 
    routes: [ 
     { path: "/", component: HomeComponent }, 
     // ... other routes ... 
     // and finally the default route, when none of the above matches: 
     { path: "*", component: PageNotFound } 
    ] 
}) 

、あなたは、実際のリダイレクトを指定することができます上記のように

Vue.component("page-not-found", { 
    template: "", 
    created: function() { 
     // Redirect outside the app using plain old javascript 
     window.location.href = "/my-new-404-page.html"; 
    } 
} 

あなたはcreatedフック上のいずれかにそれを行うことができ、あるいはまたmountedフック：それは完全にアプリの外に行くことができます。

ご注意：

1. を私は上記を確認していません。プロダクション版のアプリを構築し、上記のリダイレクトが行われるようにする必要があります。 vue-cliでこれをテストすることはできません。サーバー側の処理が必要なためです。

2. 通常、単一ページのアプリケーションでは、サーバーはすべてのルート要求に対して、特に<base href="/">を設定した場合、同じindex.htmlとappスクリプトを送信します。サーバーが特別なケースとして取り扱い、静的ページを提供しない限り、これは/404-page.htmlで失敗します。

動作している場合はお知らせください。