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

Question

我正在尝试使用 router.beforeEach 全局挂钩重定向到页面上未找到的 404.html，但没有取得太大成功（使用 Vue 和 Vue-Router ）

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

原文由 nunop 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

让我知道它是否有效！

Vue 3 以后的更新：

您需要将 '*' 路径属性替换为 --- '/:pathMatch(.*)*' 如果您使用 Vue 3 作为 '*' 的路径不再受支持.该路线将如下所示：

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

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

原文由 Mani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

@mani 的响应现在稍微过时了，因为使用 Vue 3 以后 不再支持 使用 catch-all '*' 路由。如果这不再适合您，请尝试将旧的包罗万象的路径替换为

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

本质上，您应该能够将 '*' 路径替换为 --- 并且 '/:pathMatch(.*)*' 顺利！

原因： Vue Router 不再使用 path-to-regexp ，而是实现了自己的解析系统，允许路由排名并启用动态路由。由于我们通常为每个项目添加一个单一的包罗万象的路由，因此支持 *.

（来自 https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes ）

原文由 Luca C 发布，翻译遵循 CC BY-SA 4.0 许可协议