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