1.問題
- 動態(tài)添加路由之后,頁面重新匹配路由,匹配到了設(shè)置的404 notfound頁面
- 該頁面是在路徑無法匹配到的時(shí)候才會跳轉(zhuǎn)的頁面
2. 問題查找
- 在前置路由守衛(wèi)打印to
- 發(fā)現(xiàn)當(dāng)前地址匹配到的組件是配置的404頁面
-
并且此時(shí)的動態(tài)路由中是含有改路由地址的
image.png
image.png
3.問題原因
-
在頁面刷新時(shí),會重新初始化vuex中的state數(shù)據(jù),并動態(tài)添加路由
image.png - 由于先安裝加載路由,后添加動態(tài)路由
- 此時(shí),流程是:刷新頁面 => 代碼自上而下執(zhí)行安裝路由 => 路由會立即匹配組件 => 此時(shí)還未添加動態(tài)路由 => 匹配不到對應(yīng)的組件 => 最終匹配到 notfound
4.解決辦法
- 調(diào)整添加動態(tài)路由時(shí)機(jī)
-
代碼執(zhí)行有先后,執(zhí)行順序的不同可能會導(dǎo)致不同的結(jié)果
image.png
