找不到页面上的 Vue 路由器重定向 (404) [英] Vue-router redirect on page not found (404)

问题描述

我正在尝试使用 router.beforeEach 全局钩子在未找到的页面上重定向到 404.html，但没有取得多大成功(使用 Vue 和 Vue-路由器 1.0):

I'm trying to redirect to 404.html on page not found using the router.beforeEach global hook, without much success (using Vueand 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

This is not redirecting to page 404.html when a non-existing route is inserted, just giving me an empty fragment. Only when hard-coding some-site.com/* will it redirect to the expected some-site.com/404.html

我确定这里有一些我忽略的非常明显的东西，但我不知道是什么.

I'm sure there's something very obvious here that I'm overlooking, but I cannot figure out what.

请注意，我正在寻找的是重定向到新页面，而不是重定向到另一条路由，这可以通过使用 router.redirect 轻松实现例如在这些片段中:

Please note that what I am looking for is a redirect to a new page, not a redirect to another route, which could be easily achieved by using router.redirect such as in these snippets:

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

而在我的 router.map 上，我可以有以下内容:

Whereas on my router.map, I could have the following:

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

推荐答案

我认为您应该能够使用默认路由处理程序并从那里重定向到应用程序外部的页面，详情如下:

I think you should be able to use a default route handler and redirect from there to a page outside the app, as detailed below:

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 组件定义中，您可以指定实际的重定向，这将使您完全退出应用程序:

In the above PageNotFound component definition, you can specify the actual redirect, that will take you out of the app entirely:

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 钩子上执行.

You may do it either on created hook as shown above, or mounted hook also.

请注意:

1. 我没有验证以上内容.您需要构建应用程序的生产版本，确保上述重定向发生.您不能在 vue-cli 中对此进行测试，因为它需要服务器端处理.

1. I have not verified the above. You need to build a production version of app, ensure that the above redirect happens. You cannot test this in vue-cli as it requires server side handling.

通常在单页应用程序中，服务器发送相同的 index.html 以及所有路由请求的应用程序脚本，特别是如果您设置了 .这对于您的 /404-page.html 将失败，除非您的服务器将其视为特殊情况并为静态页面提供服务.

Usually in single page apps, server sends out the same index.html along with app scripts for all route requests, especially if you have set <base href="/">. This will fail for your /404-page.html unless your server treats it as a special case and serves the static page.

让我知道它是否有效！

Vue 3 以后的更新:

如果您使用 Vue 3 作为旧版本，则需要将 '*' 路径属性替换为 '/:pathMatch(.*)*'不再支持 '*' 的全部路径.路线看起来像这样:

You'll need to replace the '*' path property with '/:pathMatch(.*)*' if you're using Vue 3 as the old catch-all path of '*' is no longer supported. The route would then look something like this:

{ path: '/:pathMatch(.*)*', component: PathNotFound },

请参阅文档有关此更新的更多信息.

See the docs for more info on this update.

这篇关于找不到页面上的 Vue 路由器重定向 (404)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！