解決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事件。
注意點：
由于打亂了原來的路由。需要在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進入待監(jiān)聽組件時，在待監(jiān)聽組件中按返回鍵時能正常進入A
})
總結(jié)
以上所述是小編給大家介紹的解決Vue 瀏覽器后退無法觸發(fā)beforeRouteLeave的問題，希望對大家有所幫助！
相關(guān)文章
這篇文章主要介紹了vue-cli3 引入 font-awesome的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了關(guān)于vant的時間選擇器使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3使用defineAsyncComponent實現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過異步加載組件,可以減少初始加載時的資源體積,從而提升應(yīng)用的加載速度和用戶體驗,本文將詳細介紹如何使用 defineAsyncComponent 實現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了VUE如何將方法名字作為變量進行調(diào)用問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解Vue 中 extend 、component 、mixins 、extends 的區(qū)別
這篇文章主要介紹了Vue 中 extend 、component 、mixins 、extends 的區(qū)別,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12
vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題
這篇文章主要介紹了vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue組件渲染與更新實現(xiàn)過程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端.這篇文章主要介紹了vue/axios請求攔截的相關(guān)知識,需要的朋友可以參考下2018-03-03
Vue利用axios發(fā)送請求并代理請求的實現(xiàn)代碼
在Web開發(fā)中,跨域問題是一個常見難題,通常由瀏覽器的同源策略引起,通過簡單配置vue.config.js文件,以及安裝axios依賴,即可實現(xiàn)前后端的無縫連接和數(shù)據(jù)交換,這種方法簡便有效,對于處理跨域請求問題非常實用2024-10-10
Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框
最近遇到了個需求是使用element-ui插件編寫頁面,點擊按鈕,彈出對話框,這篇文章主要給大家介紹了關(guān)于Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框的相關(guān)資料,需要的朋友可以參考下2022-11-11