如何在 Vue Router 中获得 404 响应
How to get a 404 response in Vue Router
我在 SPA 中已经有一个 404 处理程序可以工作。这里的问题是 Google 例如链接到不再存在的旧页面。虽然用户会看到自定义 404 组件，但我认为 google 会得到 200 OK 并继续认为该页面有效。
{
path: '*',
name: 'not-found',
component: NotFound // 404
}
我有服务器 re-route 到 / 让 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 调用。
在这种情况下，有没有办法让服务器 return 出现 404 状态码？
建议的解决方案？
服务器对前端发生的路由一无所知，但我可以让 webpack 输出站点地图或类似服务器可以验证的内容，在 header 中设置 404 并让它加载显示404. 这样可以吗还是有更好的解决办法？
备注
我最终自动创建了一个站点地图，然后根据站点地图检查路线。如果路由不匹配，它会被重新路由到自定义 404。这工作得相当好，但 Google 仍然有点困惑。
我已经对 SPA 如何模仿或响应搜索机器人请求进行了一些研究，所以我们开始 - 三个可行的解决方案。
支持 links:
元标记 #1
描述：
HTTP 代码 404 表示没有资源或已被永久删除。已删除资源意味着我们要告诉 GoogleBot 从搜索索引中删除 "dead" link。伟大的！现在我们有另一个问题可以回答 - <meta name=”robots” content=”noindex”>
作为 Google docs 状态：
You can prevent a page from appearing in Google Search by including a
noindex meta tag in the page's HTML code, or by returning a 'noindex'
header in the HTTP request. When Googlebot next crawls that page and
see the tag or header, Googlebot will drop that page entirely from
Google Search results, regardless of whether other sites link to it.
支持links:
- 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/">
引自：
As a reminder, and although it is not the preferred way to perform a
redirect, Google accepts and follows pages having a Refresh tag with
its delay set to 0, because, in some tricky cases, there is simply no
other way to perform a redirect. This is the recommended method for
Blogger pages (owned by Google).
如果您永久重定向到一个不存在的文件，HTTP 代码 301 最终将 converted 变为 404。来自 Google Docs (Prepare for 301 redirects):
While Googlebot and browsers can follow a "chain" of multiple
redirects (e.g., Page 1 > Page 2 > Page 3), we advise redirecting to
the final destination. If this is not possible, keep the number of
redirects in the chain low, ideally no more than 3 and fewer than 5.
Chaining redirects adds latency for users, and not all browsers
support long redirect chains.
支持links:
- 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.
支持 links:
我在 SPA 中已经有一个 404 处理程序可以工作。这里的问题是 Google 例如链接到不再存在的旧页面。虽然用户会看到自定义 404 组件，但我认为 google 会得到 200 OK 并继续认为该页面有效。
{
path: '*',
name: 'not-found',
component: NotFound // 404
}
我有服务器 re-route 到 / 让 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 调用。
在这种情况下，有没有办法让服务器 return 出现 404 状态码？
建议的解决方案？ 服务器对前端发生的路由一无所知，但我可以让 webpack 输出站点地图或类似服务器可以验证的内容，在 header 中设置 404 并让它加载显示404. 这样可以吗还是有更好的解决办法？
备注 我最终自动创建了一个站点地图，然后根据站点地图检查路线。如果路由不匹配，它会被重新路由到自定义 404。这工作得相当好，但 Google 仍然有点困惑。
我已经对 SPA 如何模仿或响应搜索机器人请求进行了一些研究，所以我们开始 - 三个可行的解决方案。
支持 links:
元标记 #1
描述：
HTTP 代码 404 表示没有资源或已被永久删除。已删除资源意味着我们要告诉 GoogleBot 从搜索索引中删除 "dead" link。伟大的！现在我们有另一个问题可以回答 - <meta name=”robots” content=”noindex”>
作为 Google docs 状态：
You can prevent a page from appearing in Google Search by including a noindex meta tag in the page's HTML code, or by returning a 'noindex' header in the HTTP request. When Googlebot next crawls that page and see the tag or header, Googlebot will drop that page entirely from Google Search results, regardless of whether other sites link to it.
支持links:
- 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/">
引自
As a reminder, and although it is not the preferred way to perform a redirect, Google accepts and follows pages having a Refresh tag with its delay set to 0, because, in some tricky cases, there is simply no other way to perform a redirect. This is the recommended method for Blogger pages (owned by Google).
如果您永久重定向到一个不存在的文件，HTTP 代码 301 最终将 converted 变为 404。来自 Google Docs (Prepare for 301 redirects):
While Googlebot and browsers can follow a "chain" of multiple redirects (e.g., Page 1 > Page 2 > Page 3), we advise redirecting to the final destination. If this is not possible, keep the number of redirects in the chain low, ideally no more than 3 and fewer than 5. Chaining redirects adds latency for users, and not all browsers support long redirect chains.
支持links:
- 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.
支持 links: