深入剖析 Vue Router History 路由刷新页面 404 问题：原因与解决之道

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 引言
- [History 路由模式简介](#History 路由模式简介)
- [刷新页面出现 404 错误的原因](#刷新页面出现 404 错误的原因)
- 解决方法
- - [1. 服务器端配置](#1. 服务器端配置)
  - - [Node.js + Express](#Node.js + Express)
    - Nginx
    - Apache
  - [2. 前端路由兜底](#2. 前端路由兜底)
- 总结

引言

在现代前端开发中，单页面应用（SPA）凭借其流畅的用户体验和高效的性能备受青睐。Vue Router 作为 Vue.js 官方的路由管理器，为构建单页面应用提供了强大的路由功能。其中，History 模式以其美观、符合传统 URL 规范的特点，成为众多开发者的首选。然而，使用 History 模式时，刷新页面出现 404 错误是一个常见且令人头疼的问题。本文将深入探讨该问题产生的原因，并提供详细的解决方法。

History 路由模式简介

Vue Router 的 History 模式利用 HTML5 的 History API 来实现路由切换。History API 提供了 pushState 和 replaceState 方法，允许开发者在不刷新页面的情况下改变浏览器的历史记录。当用户在应用中进行导航时，Vue Router 会使用这些方法更新 URL，同时根据新的 URL 渲染相应的组件。例如，用户从 /home 导航到 /about 时，浏览器的 URL 会变为 http://example.com/about，但页面不会刷新，而是由 Vue Router 动态地渲染 About 组件。

刷新页面出现 404 错误的原因

在 History 模式下，前端路由的切换是通过 JavaScript 动态修改 URL 实现的，浏览器并不会向服务器发送新的请求。然而，当用户刷新页面时，浏览器会直接向服务器发送当前 URL 的请求。由于服务器并不了解前端的路由配置，它会尝试根据这个 URL 去查找对应的文件或资源。如果服务器上不存在与该 URL 对应的文件，就会返回 404 错误。

举个例子，假设我们的单页面应用部署在 http://example.com 上，用户访问 http://example.com/about 并在该页面刷新。此时，浏览器会向服务器发送 /about 的请求，而服务器通常没有 /about 这个实际的文件或目录，因此会返回 404 错误。

解决方法

1. 服务器端配置

Node.js + Express

如果你使用的是 Node.js 和 Express 作为服务器，可以通过以下代码进行配置：

javascript 复制代码

const express = require('express');
const app = express();
const path = require('path');

// 静态文件服务
app.use(express.static(path.join(__dirname, 'dist')));

// 处理所有路由，返回单页面应用的入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

在上述代码中，首先使用 express.static 中间件来处理静态文件的请求。然后，使用 app.get('*', ...) 来捕获所有的请求，并返回单页面应用的入口文件 index.html。这样，无论用户访问的 URL 是什么，服务器都会返回 index.html，由前端的 Vue Router 来处理具体的路由逻辑。

Nginx

如果你使用 Nginx 作为服务器，可以在配置文件中添加以下内容：

nginx 复制代码

server {
    listen 80;
    server_name example.com;

    root /path/to/your/app/dist;
    index index.html;

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

try_files 指令会按顺序尝试查找 $uri（当前请求的 URI）、$uri/（如果是目录），如果都找不到，则返回 /index.html。这样，当用户刷新页面时，Nginx 会返回 index.html，让前端的 Vue Router 来处理路由。

Apache

在 Apache 服务器中，可以通过 .htaccess 文件进行配置：

apache 复制代码

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME}!-f
    RewriteCond %{REQUEST_FILENAME}!-d
    RewriteRule . /index.html [L]
</IfModule>

上述配置中，RewriteEngine On 开启了重写引擎。RewriteCond 指令用于设置条件，RewriteRule 指令用于定义重写规则。当请求的文件或目录不存在时，会将请求重定向到 index.html。

2. 前端路由兜底

在前端代码中，可以设置一个兜底路由，当匹配不到任何路由时，显示一个默认的页面。例如：

javascript 复制代码

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '*',
        component: NotFound
    }
];

在上述代码中，path: '*' 表示匹配所有未定义的路由，当用户访问一个不存在的路由时，会显示 NotFound 组件。虽然这并不能解决服务器返回 404 的问题，但可以给用户一个更好的视觉反馈。

总结

Vue Router 的 History 模式刷新页面出现 404 错误的根本原因是服务器不理解前端的路由配置。通过合理的服务器端配置，如 Node.js + Express、Nginx 或 Apache 的相关设置，将所有请求重定向到单页面应用的入口文件，可以有效解决该问题。同时，在前端设置兜底路由可以提升用户体验。掌握这些方法，能够让我们在使用 History 模式时更加得心应手，构建出更加稳定和流畅的单页面应用。