web-dev-qa-db-ja.com

ページ上のVue-routerリダイレクトが見つかりません（404）

私はrouter.beforeEachグローバルフックを使用して見つからないページの404.htmlにリダイレクトしようとしていますが、成功しませんでした（VueおよびVue-Router 1.0を使用）：

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>'
        }
    }
})
http-status-code-404vue.jsvue-router
36
pierreb

以下に詳述するように、デフォルトのルートハンドラを使用して、そこからアプリの外部のページにリダイレクトできるはずです。

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 }
    ]
})

上記の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を送信します。サーバーが特殊なケースとして扱い、静的ページを提供しない限り、/404-page.htmlに対してこれは失敗します。

機能するかどうか教えてください！

79
Mani

@maniの元の答えはあなたが望むものすべてですが、公式な方法でそれを読みたいのであれば、ここにあります

Vueの公式ページへの参照：

https://router.vuejs.org/guide/essentials/history-mode.html#caveat

2
Qback