背景
專案中有一個系統使用的微前端，主站使用是vue2實作的，使用的是vue-router3.x，子應用有使用vue3實作的，使用的為vue-router4.x，
該子應用中的頁面A有通過操作按鈕觸發跳轉到其他子應用頁面B的需求，此時使用的是vue-router4.x的編程式導航API，
當通過點擊主站的Tab切換回B的時候，使用的是主站的vue-router.3.x，到目前為止，都很正常，
但再次通過A的按鈕觸發跳轉到B時，就會出現 http://xxxxxundefined路徑，導致頁面空白，
分析
通過一步步斷點，追蹤問題，
第一次觸發跳轉時
第二次觸發跳轉時
當vue-router4.x進行導航時，會先從history.state中獲取一個current欄位，而vue-router3.x切換時，導致該欄位丟失了，所以最終push的路徑為undefined，
解決
在vue3的子應用中增加以下導航守衛,手動增加current欄位，
router.beforeEach(() => {
// 修復通過選單切換后（主站使用的為vue-router3.x）導致 history.state中丟失關鍵資訊
// 再次通過vue-router4.x 的 router進行切換時，跳轉到 xxxxundefined/路徑的問題
if (!history.state.current) {
history.state.current = window.location.pathname;
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551335.html
標籤：其他
上一篇：記錄-Vue移動端日歷設計與實作
下一篇：返回列表