解决vue-router嵌套路由在history模式下刷新无法渲染页面的问题

异常描述

本来使用的是vue-router的hash模式，但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），所以就需要使用history模式：

let router = new Router({ mode: 'history',routes })

然后就让后端改下 nginx配置：

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

如果静态资源文件或样式文件错线错误，可以直接使用“/”从项目根目录引入静态文件。

修改前：

<script src="./static/js/main.js"></script>

修改后：

<script src="/static/js/main.js"></script>

无论hash模式还是history模式，可以直接使用“/”从项目根目录引入静态文件。

nginx 配置代理

    location /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:9999/admin;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }