如何在 Vue Router 中获得 404 响应 [英] How to get a 404 response in Vue Router

问题描述

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

I already have a 404 handler in the SPA which works. The problem here is that Google for example links to old pages that no longer exist. While the user will see a custom 404 component, google will get, I assume, a 200 OK and continue to think the page is valid.

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

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

I have the server re-route to / and let vue handle the routing using 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>

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

It's a standard Vue CLI install with a php backend. PHP is currently only used for API calls.

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

Is there a way to have the server return a 404 status code in this scenario?

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

Suggested solution? The server knows nothing about the routing happening in the frontend, but I could have webpack output a sitemap or something like that which can be verified by the server, set 404 in the header and let it load the SPA that show the 404. Would this be OK or is there a better solution?

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

Note I ended up automatically creating a sitemap and then checking the routes against the sitemap. If the route didn't match it was rerouted to a custom 404. This worked reasonably well, but Google was still a bit confused.

推荐答案

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

I have performed some research on how SPA can mimic or respond to search-bots-requests, so here we go - three working solutions.

支持链接:

1. 更新页面标题&使用 Vue.js & 的元数据vue-router

元标记 #1

说明:

HTTP 代码 404 表示没有资源或已被永久删除.删除资源意味着我们要告诉 GoogleBot 从搜索索引中删除死"链接.伟大的！现在我们有另一个问题可以回答 -

HTTP code 404 means that there is no resource or it was removed permanently. Removed resource means that we want to tell GoogleBot to remove the "dead" link from search index. Great! Now we have another question which can be answered - <meta name="robots" content="noindex">

如 Google 文档所述:

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

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.

支持链接:

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

<小时>

元标记 #2

说明:

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

If we cannot (or do not want to) use our server to respond with 404 or any other code we can try to perform some sort of redirect - seo-safe redirect (if there is no JS enabled).

此重定向使用 HTML meta-tag，示例(立即重定向到 example.com):

This redirect uses HTML meta-tag, an example (redirects to example.com immediately):

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

引用自 StackOverflow 答案:

提醒一下，虽然这不是执行任务的首选方式重定向，Google 接受并跟踪带有 Refresh 标记的页面它的延迟设置为 0，因为在一些棘手的情况下，根本没有执行重定向的其他方式.这是推荐的方法Blogger 页面(归 Google 所有).

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 最终会转换到 404.来自 Google 文档(为 301 重定向做好准备):

HTTP code 301 will eventually be converted to 404 if you will permanently redirect to a file which does not exist. From Google Docs (Prepare for 301 redirects):

虽然 Googlebot 和浏览器可以遵循多个重定向(例如，第 1 页 > 第 2 页 > 第 3 页)，我们建议重定向到最终目的地.如果这是不可能的，请保留数量链中的低重定向，理想情况下不超过 3 次且少于 5 次.链接重定向会增加用户的延迟，而不是所有浏览器支持长重定向链.

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.

支持链接:

1. https://en.wikipedia.org/wiki/Meta_refresh
2. 使用 META REFRESH 重定向的 SEO 后果
3. http://sebastians-pamphlets.com/google-and-yahoo-treat-undelayed-meta-refresh-as-301-redirect/
4. https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#Permanent_redirections

<小时>

JavaScript 重定向

说明:

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

Perform an onload-redirect with window.location = '/404.html' to invalid location (a file that does not exist) + integrate Google Not Found Widget.

支持链接:

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

这篇关于如何在 Vue Router 中获得 404 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！