這次帶給大家vue路由在history模式下刷新時渲染頁面無反映的處理方法，處理vue路由在history模式下刷新時渲染頁面無反映的注意事項有哪些，下面就是實戰案例，一起來看一下。
解決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. 看下官方文件對嵌套路由的說明：
# 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：之前一段時間就遇到這個問題，百度了好久，發現很少人問這個問題，有一個也沒人回答。也問了好些前端大神，還是沒能解決這個問題。也許是平常寫慣了“./” 和「../」這些開頭的路徑了吧，並沒有註意到靜態文件引入方式的問題，折騰了好些方法，最後很尷尬的發現，其實問題很簡單，只是對框架的底層了解不透徹罷了！
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是vue路由在history模式下刷新時渲染頁面無反映的處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
