Vue-router在history模式下二级页面刷新404问题_vue history模式刷新页面进入404解决方案

在我的Vue3项目打包部署在NGINX上之后，出现了在二级页面下刷新出现404字样的情况，经过分析研究，最终得出两种解决方案：

一、配置NGINX，

当使用Vue Router的history模式时，在刷新二级页面时出现404 NGINX的字样，通常是由于服务器配置不正确导致的。在history模式下，Vue Router使用HTML5的History API来管理路由。它通过修改浏览器的URL来实现页面切换，而不会像传统的hash模式那样在URL中添加'#'符号。

当刷新一个二级页面时，例如http://www.example.com/second-page，服务器会尝试去寻找对应的文件或路由。然而，由于在history模式下，这个路由并不对应一个实际的文件路径，服务器会返回404错误。

为了解决这个问题，你需要在服务器上进行相应的配置。如果你使用的是Nginx服务器，你可以通过在Nginx的配置文件中添加以下配置来解决404错误：

location / {
    # root指向你的打包文件根目录
    root /www/wwwroot/html/dist;
    try_files $uri $uri/ /index.html;
}

这个配置的作用是，当服务器找不到具体的文件或路径时，将请求重定向到index.html文件。这个文件是Vue应用的入口文件，它会加载Vue Router，并根据路由配置来渲染正确的页面。

通过配置Nginx服务器，当你刷新一个二级页面时，Nginx会将请求重定向到index.html，然后Vue应用会接管路由并正确地渲染对应的组件，从而避免了404错误的出现。

二、哈希模式

当使用Vue Router的哈希模式时，URL中会添加一个带有'#'符号的哈希部分来表示路由。哈希模式的URL看起来类似于http://www.example.com/#/second-page。

在哈希模式下刷新页面时，浏览器会发送一个请求到服务器，但服务器会忽略URL中的哈希部分，继续返回index.html。然后，Vue应用会加载并解析URL中的哈希部分，根据路由配置来渲染正确的页面。因此，如果使用的是哈希模式，那么就直接可以免去404的情况。