如何在 Vue Router 中获得 404 响应

Posted 2023-02-22

【中文标题】如何在 Vue Router 中获得 404 响应

【英文标题】：How to get a 404 response in Vue Router

【发布时间】：2019-06-10 14:48:20

【问题描述】：

我已经在 SPA 中有一个可以工作的 404 处理程序。这里的问题是，例如谷歌链接到不再存在的旧页面。虽然用户会看到一个自定义的 404 组件，但我认为 google 会得到 200 OK 并继续认为该页面是有效的。

  path: '*',
  name: 'not-found',
  component: NotFound // 404

我让服务器重新路由到 / 并让 vue 使用 History 处理路由：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %HTTPS off
  RewriteRule (.*) https://%HTTP_HOST%REQUEST_URI [R=301,L]
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %REQUEST_FILENAME !-f
  RewriteCond %REQUEST_FILENAME !-d
  RewriteRule . /index.html [L]
</IfModule>

这是一个带有 php 后端的标准 Vue CLI 安装。 PHP 目前仅用于 API 调用。

在这种情况下，有没有办法让服务器返回 404 状态码？

建议的解决方案？ 服务器对前端发生的路由一无所知，但我可以让 webpack 输出一个站点地图或类似的东西，服务器可以验证，在标题中设置 404 并让它加载显示 404 的 SPA。这会不会没问题还是有更好的解决方案？

注意 我最终自动创建了一个站点地图，然后根据站点地图检查路线。如果路由不匹配，则将其重新路由到自定义 404。这工作得相当好，但 Google 仍然有点困惑。

【问题讨论】：

我认为没有解决办法。这些 http 代码用于另一层。 Vuejs 为时已晚。唯一的方法是通过使用 Ajax 发送一个 http get 请求然后检查状态代码来对其进行分类。如果它 404 重定向或使用响应。

@msphn 建议的解决方案不是可行的后备方案吗？让 PHP 读取输出站点地图并验证路由 - 然后决定是否在标题中设置 404？或者重定向到 404 我猜。只是有点笨拙。

不会。但是你需要一个 404 码吗？

一般来说，这只是关于 SEO 和搜索引擎的过时概念的问题。客户也不理解这些概念，并且一直在为 SEO 和其他东西哭泣。我已经构建了 API 来生成 vue 路由，只是为了能够向某些用户代理实际显示开放的图形数据。真是让人头疼。

@msphn 我不需要 404，搜索引擎需要。另一个站点曾经在同一个域上，因此它正在 ping 不再存在的路由，这很烦人。

【参考方案1】：

我已经对 SPA 如何模仿或响应搜索机器人请求进行了一些研究，所以我们开始了 - 三个可行的解决方案。

支持链接：

Updating Page Title & Metadata with Vue.js & vue-router

元标记#1

说明：

HTTP 代码 404 表示没有资源或已被永久删除。删除资源意味着我们要告诉 GoogleBot 从搜索索引中删除“死”链接。伟大的！现在我们还有一个可以回答的问题 - <meta name=”robots” content=”noindex”>

作为Google docs 状态：

您可以通过添加 页面 HTML 代码中的 noindex 元标记，或通过返回“noindex” HTTP 请求中的标头。当 Googlebot 下次抓取该页面时 查看标签或标题，Googlebot 将完全从 Google 搜索结果，无论其他网站是否链接到它。

支持链接：

https://searchengineland.com/meta-robots-tag-101-blocking-spiders-cached-pages-more-10665 https://support.google.com/webmasters/answer/79812?hl=en https://support.google.com/webmasters/answer/93710?visit_id=636835318879056986-3786307088&rd=1

---

元标记#2

说明：

如果我们不能（或不想）使用我们的服务器来响应 404 或任何其他代码，我们可以尝试执行某种重定向 - seo-safe 重定向（如果没有启用 JS）。

此重定向使用 HTML meta-tag，一个示例（立即重定向到 example.com）：

<meta http-equiv="refresh" content="0; url=http://example.com/">

引用*** answer:

提醒一下，虽然这不是执行 重定向，Google 接受并关注具有 Refresh 标签的页面 它的延迟设置为 0，因为在一些棘手的情况下，根本没有 执行重定向的其他方式。这是推荐的方法 Blogger 页面（归 Google 所有）。

如果您将永久重定向到不存在的文件，HTTP 代码 301 最终将是 converted 到 404。来自Google Docs (Prepare for 301 redirects)：

虽然 Googlebot 和浏览器可以遵循多个“链” 重定向（例如，第 1 页 > 第 2 页 > 第 3 页），我们建议重定向到 最终的目的地。如果无法做到这一点，请保留 在链中重定向低，理想情况下不超过 3 且少于 5。 链接重定向会增加用户的延迟，而不是所有浏览器 支持长重定向链。

支持链接：

https://en.wikipedia.org/wiki/Meta_refresh SEO consequences of redirecting with META REFRESH http://sebastians-pamphlets.com/google-and-yahoo-treat-undelayed-meta-refresh-as-301-redirect/ https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#Permanent_redirections

---

JavaScript 重定向

说明：

使用window.location = '/404.html' 执行onload-重定向到无效位置（不存在的文件）+ 集成Google Not Found Widget。

支持链接：

https://googleblog.blogspot.com/2008/10/helping-website-oweners-fix-broken.html

【讨论】：

哇，在这方面付出了很多努力 - 非常感谢！我不确定它是否能解决问题，但是因为它们都依赖于在页面加载后修改页面的内容并且标题中有 200OK 。我将尝试在路由的 404 页面上添加 noindex 元数据，看看会发生什么。我会回复你的:)

@Eirinn，谷歌更聪明，所以 200 OK 并不意味着页面没问题，不需要解析额外的内容 - 标题等。

标记为答案 - 即使第一个解决方案不能完全解决问题，我相信我可以通过一些摆弄来解决它。

@Eirinn，你能详细说明一下什么样的摆弄和什么方法部分有效 - 第二个？

哦，你是对的，没有什么比在没有描述的情况下偶然发现一个带有“thx it working”的旧线程更糟糕的了。我使用了第一个并为我的 404 页面实现了 noindex。这会导致搜索机器出现 200OK 和“别管我”。 #2 可能是一个更好的选择，我会在某个时候进行试验。也许使用路由器检查它是内部还是外部请求（是否在 spa 内部），然后执行 #1 或 #2。还不知道:)