解決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：以前一段時間就遇到過這個問題，百度了很久，發現不多有人問這個問題，有一個也沒人回答。也問了好些前端大神，仍是沒能解決這個問題。也許是平時寫慣了「./」 和「../」這些開頭的路徑了吧，並無注意到靜態文件引入方式的問題，折騰了好些方法，最後很尷尬的發現，其實問題很簡單，只是對框架的底層瞭解不透徹罷了！