Vue.js 路由嵌套出現(xiàn)錯誤，部分頁面會出現(xiàn)循環(huán)嵌套，刷新后可正常顯示

項目中使用 vue-router 的嵌套路由實現(xiàn)類似 “Layout” 的功能，具體設計如下：

訪問地址如：http://0.0.0.0:8080/uc/member/index/index

首先是 / 路由（第一層路由），該路由組件為一個帶有 header、body、footer 的三層結(jié)構(template)，其中在 body 元素內(nèi)有一個 router-view。

uc 為第二層路由（會員中心），該路由是一個帶有 header-sub、sidebar 和 contents 的結(jié)構，其中在 contents 元素內(nèi)有一個 router-view 作為動態(tài)切換區(qū)域。

當我訪問 http://0.0.0.0:8080/uc/member/index/index 的時候，實際的路由進行了 4 連跳，/uc -> /uc/member -> /uc/member/index - /uc/member/index/index。

但是，問題出現(xiàn)了~

這種問題是隨機性的，有些界面會出現(xiàn)，有些界面不會出現(xiàn)，而且，大部分情況下，刷新頁面即可恢復正常顯示。

.sidebar 中存放著一個菜單，使用 router-link 跳轉(zhuǎn)頁面，但只要其中的某個頁面出現(xiàn)顯示錯誤，則其他的頁面也會跟著出現(xiàn)錯誤（哪怕剛剛還是正常顯示的）！

uc 下面劃分了 member、wallet 和 agent 三個子模塊，在 .header-sub 中一個導航可切換，.sidebar 中的菜單可根據(jù)三個子模塊顯示不同的菜單，但，只有 member 中的頁面會出現(xiàn)上述問題，其他兩個模塊中的頁面均不存在該問題。

整個項目使用 Vue cli 構建，大概有幾十個頁面，可復用組件頁差不多有幾十個，使用 axios 請求數(shù)據(jù)。

驗證的可能性有：

網(wǎng)絡延遲：嘗試在頁面渲染完后再加載數(shù)據(jù)，但問題仍未解決；
錯誤的路由語法：把每個層級的根路由設置為 ` 或 /`，仍未解決問題；
超過 3 層路由顯示不正常，嗯，我遇到的就是這個問題，但怎樣解決呢？

請問諸位大神，還有沒有遇到類似問題的，怎樣解決？

回答

編輯回答

久愛她

問題的原因找到了：

首先是要排除代碼中的基本警告和錯誤，確?；镜倪壿嬤\行；
然后就是檢查代碼有無 死循環(huán) 或 遞歸導致的棧溢出；

我的代碼是因為存在 遞歸導致的棧溢出，進而導致視圖布局出錯。我的項目中存在一個側(cè)邊菜單，我使用當前路由對象的 matched 數(shù)組進行菜單比對，結(jié)果導致了棧溢出。

最終的解決辦法是：在比對菜單的時候優(yōu)先比對路徑(path)，如果路徑一致，則繼續(xù)比對參數(shù)(query)，修改后的代碼僅有10幾次循環(huán)操作，頁面在沒出現(xiàn)嵌套出錯的情況了。類似查找某人，先排除姓、再排除名，最后確認性別，逐漸縮小循環(huán)的層級。

2018年7月29日 09:59