如何使用 vue-router 在 vuejs 中创建 404 组件

Question

我是 vuejs 的新手，我正在使用 vue 进行我的第一个项目。我只是想知道当找不到请求的 url 时，我将如何路由到我的 404.vue 组件。

任何想法？

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

Answer 1

在路由声明中，我喜欢添加以下内容：

 [
  ...
  { path: '/404', component: NotFound },
  { path: '*', redirect: '/404' },
  ...
]

这意味着如果用户被导航到与任何路由都不匹配的路径，它将被重定向到“404”路由，其中将包含“未找到”消息。

我将它分成 2 条路由的原因是，当您需要的某些数据无法解析时，您还可以以编程方式将用户定向到 404 路由。

例如，如果你正在创建一个博客，你可能有这样的路线：

 { path: '/posts/:slug', component: BlogPost }

即使提供的 slug 实际上没有检索到任何博客文章，这也会解决。要处理此问题，当您的应用程序确定未找到帖子时，请执行

return this.$router.push('/404')

或者

return router.push('/404')

如果您不在 Vue 组件的上下文中。

但要记住的一件事是，处理未找到响应的正确方法不仅仅是提供错误页面 - 您应该尝试向浏览器提供实际的 HTTP 404 响应。如果用户已经在单页应用程序中，则无需执行此操作，但如果浏览器将示例博客文章作为其初始请求，则服务器实际上应该返回 404 代码。

原文由 g-wilson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在在 Vue 3 path: '*' 将不起作用。我们必须使用正则表达式： /:catchAll(.*)

我们可以直接使用而不是使用 path: "*"

 {
    // path: "*",
    path: "/:catchAll(.*)",
    name: "NotFound",
    component: NotFound,
}

或者

{
    path: '/404', name: 'NotFound', component: NotFound
},
{
    path: '/:catchAll(.*)', redirect:'404'
}

我从 这里 得到的

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