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