首页 前端知识 vue.js单页面 如何遇到404页面如何正确返回状态码404

vue.js单页面 如何遇到404页面如何正确返回状态码404

2024-02-11 10:02:53 前端知识 前端哥 913 532 我要收藏

客户端配置(Vue.js)

在客户端,你可以在 Vue 路由器(vue-router)中设置一个捕获所有未定义路由的规则,显示一个 404 组件,但请注意这不会改变 HTTP 状态码。

import Vue from 'vue';
import Router from 'vue-router';
import NotFound from './components/NotFound.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    // ...其他路由...
    { path: '*', component: NotFound }
  ]
});

export default router;

在这种配置下,当用户访问一个不存在的页面时,他们会看到一个 404 错误页面,但浏览器的 HTTP 状态码仍然是 200。

结论:并没有解决问题

尝试通过Nginx配置解决问题

在 Nginx 中,你可以配置一个规则来捕获所有的前端路由请求,并将它们重定向到 Vue 应用的入口点(通常是 index.html)。然而,要返回 404 状态码给浏览器而不是简单地重定向到首页或错误页面,你需要一些额外的逻辑。

这里是一个基本的 Nginx 配置示例,它处理了将所有非静态文件请求重定向到 index.html,同时保持对静态文件的正常访问:

server {
    listen 80;

    server_name example.com;
    root /path/to/your/vue/app;

    index index.html;

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

这个配置确保了所有的前端路由都会被正确处理,但它并不会返回 404 状态码。要实现返回 404 状态码的逻辑,需要在 Vue 应用中添加服务端渲染的支持;

继续查询资料得出结论如下:

对于纯 Vue.js 开发的单页面应用(SPA),在客户端直接返回 404 状态码是不可能的。这是因为 SPA 的工作原理和服务器配置有关。以下是主要原因和概念的总结:

  1. SPA工作原理: 在 Vue.js 或任何其他 SPA 框架中,页面的路由是由客户端 JavaScript 控制的。当用户在应用内部导航时,实际上并没有向服务器发送新的页面请求。相反,Vue.js 动态地在客户端更新内容,这意味着服务器仅在最初加载应用时参与。

  2. HTTP状态码: HTTP状态码是由服务器在响应HTTP请求时发送的。在SPA中,大部分页面导航不涉及到新的HTTP请求,因此没有机会从服务器返回新的状态码。服务器通常只在加载整个应用时返回200状态码。

  3. 服务器配置: 尽管可以在服务器(如Nginx或Apache)上进行配置,以便于对于某些路由返回404页面,这只适用于服务器接收到实际HTTP请求的情况。对于Vue.js内部的路由,服务器不参与,因此无法直接返回404状态码。

  4. 服务端渲染(SSR): 要在SPA中实现类似的功能(例如,对于不存在的路由返回404状态码),需要使用服务端渲染(SSR)。SSR允许在服务器上渲染页面,这意味着服务器可以根据请求的路由返回不同的状态码。但这需要使用像Nuxt.js这样的框架来实现,这不再是纯 Vue.js 应用。

  5. SEO和用户体验: 尽管不能直接在客户端返回404状态码,但你可以在Vue.js应用内部展示一个404错误页面,以提升用户体验。对于SEO,最好的做法是使用SSR或预渲染页面。

在次尝试nginx方案

  1. 基本 SPA 配置: 配置 Nginx 以重定向所有非静态文件请求到 index.html
  2. 自定义 404 页面: 添加一个配置来处理不存在的路由,展示一个自定义的 404 页面。
server {
    listen 80;
    server_name example.com;
    root /path/to/your/vue/app;

    index index.html;

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

    # 自定义404页面
    error_page 404 /custom_404.html;
    location = /custom_404.html {
        internal;
    }
}

在这种配置中,当用户访问一个不存在的页面时,他们会看到 custom_404.html 页面。但请注意,这个方法不会改变HTTP状态码为 404,除非该请求是直接发送到服务器的(例如,用户直接输入一个不存在的URL)。

总结:

  • 对于静态托管的 Vue.js SPA,可以通过配置 Web 服务器(如 Nginx)来显示自定义的 404 页面,但这通常不会改变HTTP状态码(除非是直接的请求)无法实现返回404状态码。

后续解决方案

  • 要彻底解决这个问题,需要结合服务器端渲染(SSR)
  • 通过vue重定向到指定服务端接口,接口返回404 html,并且修改respose code
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1776.html
标签
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!