Vue - 如何使用 404 响应代码创建 404 错误页面答案

【问题标题】：Vue - How to create 404 error page with 404 response codeVue - 如何使用 404 响应代码创建 404 错误页面
【发布时间】：2020-09-14 03:24:02
【问题描述】：

如何在 Vue 中创建带有 404 响应代码的 404 错误页面？这是404的路线。

{
    path: "*",
    name: "404",
    component: load("404"),
    alias: "/404"
  }

【问题讨论】：

标签： vue.js vue-router vue-cli

【解决方案1】：

您将无法在单页应用程序中设置 HTTP 状态代码 - 所有路由都在浏览器的同一页面上完成，因此一旦页面加载，将不会再收到 HTTP 状态代码。

但是，如果您尝试通过直接在浏览器的地址栏中键入/复制 URL 来加载不存在的路由 - 那么您可以使用 nginX（或您正在使用的任何服务器软件）发出 404 HTTP 状态信号：

server {
  error_page 404 /404.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

但这不是一种实用/明智的方法 - 基本上，您希望将每个不存在的路径解析为 /index.html 以便您的 SPA 始终加载并且一旦加载 - 它会检测到这条路线不存在并且将呈现您的 404 组件。

所以你的 nginX 配置应该是这样的：

server {
  ...

  location / {
    try_files $uri /index.html$is_args$args;
  }
}

如果$args 不为空，则$is_args 变量将添加?，而$args 将提供查询参数（如果有）。

【讨论】：

【解决方案2】：

您的路由定义看起来不错，除了我不知道您的 load 函数是否，即它如何解析为 Vue 组件。但总的来说，您的代码遵循Vue router docs 中描述的通用方法。通常你在这里不需要name 或alias，因为这条路线没有明确使用。只需放入一个显示您的“未找到”内容的组件，您就可以开始了：

{
  path: "*",
  component: PageNotFound
}

由于这与您提供的代码非常接近，请解释究竟是什么给您带来了问题。

【讨论】：