Vue.js 如何使用vue路由器在vuejs中创建404组件

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

---

有什么想法吗？

我要做的是给父div一个

httpfound

类，然后将我所有的组件和App.vue的挂载钩子交给它。如果没有

httpfound

类的元素，我将重定向到404页面

App.vue

---

有几种方法可以做到这一点

最常见的方法是在导航之前检查路径是否与任何路线匹配，如果不匹配，则重定向到未找到页面

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
    next('/notFound');
  } else {
    next();
  }
});

---

请参见。

在路线声明中，我想添加以下内容：

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

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

我将其分为两条路由的原因是，在这种情况下，当您需要的某些数据无法解析时，您还可以通过编程将用户定向到404路由

例如，如果您正在创建博客，您可能有以下路径：

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

这将解决，即使提供的slug实际上没有检索任何博客文章。若要处理此问题，当应用程序确定找不到帖子时，请执行以下操作：

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

或

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

---

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

在@g-wilson answer之后，我去了

{path:'*'，component:NotFound}

。如果您不想进行重定向，可能会很有用。

现在在Vue 3

路径中：“*”

将不起作用。我们必须使用regex:

/：catchAll（.*）

我们可以直接使用，而不是使用

路径：“*”

{
//路径：“*”，
路径：“/：catchAll（.*）”，
名称：“未找到”，
组件：未找到，
}

或

{
路径：'/404'，名称：'NotFound'，组件：NotFound
},
{
路径：'/：catchAll（.*），重定向：'404'
}

---

我是从

的可能副本中获得的，如果您不想在浏览器中保留路径，请执行：

{path:'/404'，别名：'*'，component:NotFound，}

这对分析/搜索引擎优化不好。搜索引擎机器人、谷歌搜索控制台、谷歌分析等在未找到页面时将不会收到实际的404状态码。@torjinx什么是SEO友好选项？@HamishJohnson很遗憾，我还没有找到一个。。。如果有人能插话，我会非常激动。使用SPA应用程序，服务器已经回复了200个状态码，然后Vue加载并将用户带到页面。所以你不能发送404，因为服务器已经发送了200。您最好研究服务器端渲染，比如Nuxt.js，因为您可能可以通过这种方式处理404。大多数情况下，您不希望将它们混合使用。与

路径：'*'

不同，这种方法捕获到不存在的命名路由的导航，例如

：to=“{name:'InvalidRoute'}”

或

$router.push（{name:'InvalidRoute'}）

。然而，它确实给每个请求增加了一点开销。

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

return router.push('/404')