在页面上找不到Vue-router重定向(404)

问题描述

我试图重定向到使用router.beforeEach全局钩子找不到的页面上的404.html，但没有成功(使用Vue和Vue-Router 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以及应用程序脚本，尤其是在您已设置<base href="/">的情况下.除非您的/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-router重定向(404)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！