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

一. 异常描述：

原本使用的是vue-router的hash模式，可是hash模式下url须要带“#”符号，不只看起来不舒服，并且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），因此就须要使用history模式，而后就让后端改下nginx配置：

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

vue-router使用history模式+使用嵌套路由：

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: mall,
            name: 'mall'
        },
        ……

        //个人银行卡
        {
          path: '/myCard',
          meta: { requireAuth: true },
          component: myCard,
          name: 'myCard',
          children:[
            { path:'', component: card},
            { path:'add', component: add}
          ]
        }
         ……
    ]
})       

访问路由和嵌套路由页面，显示正常，可是刷新页面的时候，嵌套路由页面就出异常了：

页面样式全乱了，看下页面请求加载的静态文件,全部静态文件都是404；

二. 异常解析：

 1. 看下官方文档对嵌套路由的说明——https://router.vuejs.org/zh-cn/essentials/nested-routes.html：

2. 再看以前的异常页面，看来咱们的父路由成了根目录了看下文件路径了：

 

3. 看下咱们引入这些异常文件，是在index.html文件中直接引用的，也就是在根路径下引入的。以前的hash模式下,根路径是不会变的，因此咱们在index.html文件中直接引入这些静态文件，是可行的，可是使用history模式后，根路径就不固定了。那么这种引入方式就不可行了，因此才形成了上边出现的页面没法渲染的问题：

 三. 解决问题：

这里有点尴尬，先考虑的主Vue中以Import的方式引入静态样式文件，的确可行，可是最后发现，直接修改index.html文件中的静态文件引入路径就OK了：

修改前：

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

修改后

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

四. 原理：

./ 是指用户所在的当前目录（相对路径）；

/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；

对于hash模式，根路径是固定的，就是项目的根目录，可是history模式下，以 / 开头的嵌套路径会被看成根路径，因此使用“./”引入文件，就会找不到文件了，由于文件自己就是在项目根目录下的，并不在嵌套路径这个目录下。

总结，不管hash模式仍是history模式，能够直接使用“/”从项目根目录引入静态文件。

PS：以前一段时间就遇到过这个问题，百度了很久，发现不多有人问这个问题，有一个也没人回答。也问了好些前端大神，仍是没能解决这个问题。也许是平时写惯了“./” 和“../”这些开头的路径了吧，并无注意到静态文件引入方式的问题，折腾了好些方法，最后很尴尬的发现，其实问题很简单，只是对框架的底层了解不透彻罢了！