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