解決Vue 瀏覽器后退無(wú)法觸發(fā)beforeRouteLeave的問(wèn)題
現(xiàn)象
加載第一個(gè)組件（這里的第一個(gè)意思是瀏覽器歷史記錄的第一個(gè)，后文稱(chēng)為 待監(jiān)聽(tīng)組件 ）時(shí)，正常跳轉(zhuǎn)其他頁(yè)面可以觸發(fā)beforeRouteLeave。 但是 按瀏覽器的后退按鈕監(jiān)聽(tīng)不到該事件。
解決方案
目前采用比較土且不實(shí)用的解決方案。加一層組件，再router.push到 待監(jiān)聽(tīng)組件 ，使得 待監(jiān)聽(tīng)組件 非第一個(gè)組件，可以正常監(jiān)聽(tīng)beforeRouteLeave事件。
注意點(diǎn)：
由于打亂了原來(lái)的路由。需要在main.js中添加全局的路由監(jiān)聽(tīng)
router.beforeEach((to, from, next) => {
if (to is '用于跳轉(zhuǎn)的組件' && from is '待監(jiān)聽(tīng)組件') {
router.go(-1)
next(false)
} else {
next()
}
// 這樣當(dāng)從一個(gè)普通頁(yè)面A進(jìn)入待監(jiān)聽(tīng)組件時(shí)，在待監(jiān)聽(tīng)組件中按返回鍵時(shí)能正常進(jìn)入A
})
總結(jié)
以上所述是小編給大家介紹的解決Vue 瀏覽器后退無(wú)法觸發(fā)beforeRouteLeave的問(wèn)題，希望對(duì)大家有所幫助！
相關(guān)文章
Vue實(shí)現(xiàn)組件間通信的幾種方式(多種場(chǎng)景)
本文主要介紹了Vue實(shí)現(xiàn)組件間通信的幾種方式，不同的場(chǎng)景使用不同的方式，基本滿足所有開(kāi)發(fā)場(chǎng)景中的通信需求，感興趣的可以了解一下2021-10-10
這篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問(wèn)題及解決方法
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
使用Vue3實(shí)現(xiàn)交互式雷達(dá)圖的代碼實(shí)現(xiàn)
雷達(dá)圖是一種可視化數(shù)據(jù)的方式,用于比較多個(gè)類(lèi)別中不同指標(biāo)的相對(duì)值,它適用于需要展示多個(gè)指標(biāo)之間的關(guān)系和差異的場(chǎng)景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達(dá)圖,需要的朋友可以參考下2024-06-06
vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能詳解
ExcelJS是一個(gè)用于在Node.js和瀏覽器中創(chuàng)建、讀取和修改Excel文件的強(qiáng)大JavaScript庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)混合圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue+ElementUI技巧之自定義表單項(xiàng)label的文字提示方法
這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項(xiàng)label文字提示的相關(guān)資料,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02