【问题标题】：How to create a 404 component in vuejs using vue-router如何使用 vue-router 在 vuejs 中创建 404 组件
【发布时间】：2018-01-19 00:56:24
【问题描述】：

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

有什么想法吗？

【问题讨论】：

【解决方案1】：

我所做的就是给父 div 一个类 http-found 我的所有组件，我使用 jQuery 或 Javascript 来检查 App.vue 的挂载钩子是否有任何类为 @987654322 @如果不是，我会重定向到我的 404 页面。

App.vue

mounted(){
   if(!$('.http-found')){
     this.$router.push('/404')
   }
}

【讨论】：

【解决方案2】：

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

最通用的一种是在导航之前检查路径是否匹配任何路线，如果不匹配则重定向到未找到页面。

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

【讨论】：

与 path: '*' 不同，此方法捕获导航到不存在的命名路线，例如 :to="{ name: 'InvalidRoute' }" 或 $router.push({ name: 'InvalidRoute' })。但是，它确实为每个请求增加了一点开销。

【解决方案3】：

在路由声明中，我喜欢添加：

[
  ...  
  { 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 代码。

【讨论】：

如果您不希望它在浏览器中保留路径，请执行以下操作：{ path: '/404', alias: '*', component: NotFound,}
这对分析/SEO 不利。找不到页面时，搜索引擎机器人、Google Search Console、Google Analytics 等将不会收到实际的 404 状态代码。
@torjinx 什么是 SEO 友好的选择？
@HamishJohnson 很遗憾，我还没有找到一个……如果有人能就这个问题发表意见，我会很高兴。
对于 SPA 应用，服务器已经回复了 200 状态码，然后 Vue 加载并将用户带到页面。所以你不能发送 404，因为服务器已经完成了 200。你最好研究像 Nuxt.js 这样的服务器端渲染，因为你可能可以这样处理 404。

【解决方案4】：

@g-wilson 回答后我去了{ path: '*', component: NotFound }。如果您不想进行重定向，可能会很有用。

【讨论】：

【解决方案5】：

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

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

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

或

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

我从here得到它

【讨论】：