vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉跳操作
更新時間：2020年09月09日 09:40:22 作者：小白阿斯蘭
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉跳操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天測試給我報了個bug說點擊瀏覽器返回頁數(shù)據(jù)顯示的不對，我查了半天原因：需要監(jiān)聽瀏覽器的回退按鈕，并阻止其默認事件。
具體操作方法如下：
1、掛載完成后，判斷瀏覽器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.cancel, false);
}
},
2、頁面銷毀時，取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽
destroyed(){
window.removeEventListener('popstate', this.cancel, false);
}
3、將監(jiān)聽操作寫在methods里面，removeEventListener取消監(jiān)聽內(nèi)容必須跟開啟監(jiān)聽保持一致，所以函數(shù)拿到methods里面寫
cancel: function() {
if(this.orderId){
this.$router.push({
name:"orderList",
params: {id:this.orderId},
});
}else{
this.$router.go(-1);
}
},
補充知識：vue-router組件內(nèi)導航守衛(wèi)判斷返回按鈕
組件內(nèi)導航守衛(wèi)會出現(xiàn)無法攔截$router.go(-1)或者物理返回按鈕，在攔截函數(shù)外包裹setTimeout即可。具體原因還未發(fā)現(xiàn)。
setTimeout(() => {
this.$confirm('編輯的頁面布局尚未保存，確定離開？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next()
return
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
next(false)
return
})
}, 500)
以上這篇vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉跳操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼
Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-04-04
文章展示了基于Vue封裝的標準漏斗圖的代碼,包括權重算法、滾輪監(jiān)聽和點擊示例功能,旨在提供實用的圖表展示技巧2025-02-02
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)自定義視頻和圖片上傳的功能，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學習一下2023-04-04
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
基于vue-cli創(chuàng)建的項目的目錄結構及說明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項目的目錄結構及說明介紹，具有很好的參考價值，希望對大家有所幫助2017-11-11
這篇文章主要為大家介紹了Javascript對象及Proxy工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
VueUse提供了一個豐富且強大的Hooks庫,可以幫助開發(fā)者快速實現(xiàn)各種功能,提高開發(fā)效率,本文來詳細的介紹一下,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue.js之VNode的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04