vue-router3.x和vue-router4.x相互影響的問題分析
背景
項目中有一個系統(tǒng)使用的微前端，主站使用是vue2實現(xiàn)的，使用的是vue-router3.x。子應(yīng)用有使用vue3實現(xiàn)的，使用的為vue-router4.x。
該子應(yīng)用中的頁面A有通過操作按鈕觸發(fā)跳轉(zhuǎn)到其他子應(yīng)用頁面B的需求，此時使用的是vue-router4.x的編程式導(dǎo)航API。
當(dāng)通過點擊主站的Tab切換回B的時候，使用的是主站的vue-router.3.x，到目前為止，都很正常。
但再次通過A的按鈕觸發(fā)跳轉(zhuǎn)到B時，就會出現(xiàn) http://xxxxxundefined路徑，導(dǎo)致頁面空白。
分析
通過一步步斷點，追蹤問題。
第一次觸發(fā)跳轉(zhuǎn)時
第二次觸發(fā)跳轉(zhuǎn)時
當(dāng)vue-router4.x進(jìn)行導(dǎo)航時，會先從history.state中獲取一個current字段，而vue-router3.x切換時，導(dǎo)致該字段丟失了，所以最終push的路徑為undefined。
解決
在vue3的子應(yīng)用中增加以下導(dǎo)航守衛(wèi),手動增加current字段。
router.beforeEach(() => {
// 修復(fù)通過菜單切換后（主站使用的為vue-router3.x）導(dǎo)致 history.state中丟失關(guān)鍵信息
// 再次通過vue-router4.x 的 router進(jìn)行切換時，跳轉(zhuǎn)到 xxxxundefined/路徑的問題
if (!history.state.current) {
history.state.current = window.location.pathname;
}
});到此這篇關(guān)于vue-router3.x和vue-router4.x相互影響的問題記錄的文章就介紹到這了,更多相關(guān)vue-router3.x和vue-router4.x內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3+ts項目搭建的實現(xiàn)示例,本文目的在于記錄自己項目框架搭建的過程,通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue中elementUI里面一些插件的使用方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue+elementUi中的table實現(xiàn)跨頁多選功能(示例詳解)
最近在開發(fā)工業(yè)品超市的后臺系統(tǒng),遇到一個需求,就是實現(xiàn)在一個table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無語,下面通過本文給大家分享vue+elementUi中的table實現(xiàn)跨頁多選功能,感興趣的朋友跟隨小編一起看看吧2024-05-05
options是new Vue的參數(shù),我們一般稱之為選項或者構(gòu)造選項,下面這篇文章主要給大家介紹了關(guān)于Vue中options選項的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本文主要介紹了vue整合百度地圖顯示指定地點信息，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue和H5 draggable實現(xiàn)拖拽并替換效果
這篇文章主要為大家詳細(xì)介紹了vue和H5 draggable實現(xiàn)拖拽并替換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了vue中marker被識別點擊的過程場景分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11