vue-router3.x和vue-router4.x相互影響的問題記錄

背景

項目中有一個系統使用的微前端，主站使用是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;
  }
});