Vue Router的history模式为什么会404？

Vue Router的history模式为何会出现404问题？解析与解决方案

---

在Vue.js应用中，当我们使用Vue Router并启用history模式时，可能会遇到页面刷新或直接访问某些路由时出现404错误的问题，这主要是因为history模式依赖于HTML5的History API，而服务端未正确配置导致的路由匹配失败，我们将详细解析这一现象的成因,并提供解决方案。

核心原因：服务端未处理前端路由

1. 前端路由与后端路由的差异：
   Vue Router的history模式通过HTML5的pushState和replaceState方法实现无刷新导航，使URL看起来更像传统的路径结构（如/user/profile），而非哈希模式下的/#/user/profile，当用户直接访问或刷新这类路径时，请求会直接发送到服务器，而非由前端路由处理，若服务器未配置将这些路径指向前端入口文件（如index.html）,则会因找不到对应资源而返回404。

2. SPA（单页应用）的特性：
   SPA的所有路由逻辑均在前端处理，服务端仅需提供静态资源（HTML、JS、CSS等），若服务端尝试解析前端路由路径下的具体资源（如数据库查询或动态页面渲染），而实际上这些路径并不对应后端资源,自然会导致404。

解决方案：服务端配置与前端调整

1. 服务端配置重定向：

   • Nginx示例：
     在Nginx配置中，将所有非静态资源请求重定向到index.html，由前端路由接管后续处理。

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

   • Apache示例：
     使用.htaccess文件实现类似逻辑。

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

2. 前端路由基路径设置：
   若应用部署在子路径下（如https://example.com/my-app/），需在Vue Router配置中设置base选项,确保路由匹配正确。

   const router = new VueRouter({
     mode: 'history',
     base: '/my-app/', // 根据实际部署路径调整
     routes: [...]
   });

3. 捕获404路由：
   在Vue Router中定义一个通用的404路由组件，当所有其他路由未匹配时展示,提升用户体验。

   { path: '*', component: NotFoundComponent } // Vue Router 3.x
   // 或
   { path: '/:pathMatch(.*)*', component: NotFoundComponent } // Vue Router 4.x

为什么哈希模式不会出现此问题？

哈希模式（mode: 'hash'）通过URL的哈希部分（后的内容）管理路由，这部分变化不会触发HTTP请求到服务器，因此无需服务端特殊配置即可正常工作，其URL形式不够美观，且不利于SEO优化，故在追求更好用户体验时，history模式成为更优选择。

Vue Router的history模式404问题，本质上是前端路由与后端服务配置不匹配所致，通过合理配置服务端重定向规则、设置前端路由基路径及捕获未匹配路由，可以有效解决这一问题，确保应用在各种访问场景下均能稳定运行，理解并正确处理这一机制，是开发高质量Vue.js应用的关键一步。