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