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)聽內容必須跟開啟監(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組件內導航守衛(wè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)聽瀏覽器原生返回按鈕,進行路由轉跳操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼
Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼,具有一定的參考價值,感興趣的可以了解一下
2024-04-04
Vue封裝的標準漏斗圖教程
文章展示了基于Vue封裝的標準漏斗圖的代碼,包括權重算法、滾輪監(jiān)聽和點擊示例功能,旨在提供實用的圖表展示技巧
2025-02-02
超簡單的Vue.js環(huán)境搭建教程
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue實現(xiàn)自定義視頻和圖片上傳的示例代碼
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)自定義視頻和圖片上傳的功能，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學習一下
2023-04-04
Vue中的Ajax?配置代理slot插槽的方法詳解
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-06-06
基于vue-cli創(chuàng)建的項目的目錄結構及說明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項目的目錄結構及說明介紹，具有很好的參考價值，希望對大家有所幫助
2017-11-11
Javascript對象及Proxy工作原理詳解
這篇文章主要為大家介紹了Javascript對象及Proxy工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue 3開發(fā)中VueUse強大Hooks庫
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的使用
這篇文章主要介紹了Vue.js之VNode的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04