快捷導(dǎo)航

vue監(jiān)聽(tīng)瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作

更新時(shí)間：2020年09月09日 09:40:22 作者：小白阿斯蘭

這篇文章主要介紹了vue監(jiān)聽(tīng)瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

今天測(cè)試給我報(bào)了個(gè)bug說(shuō)點(diǎn)擊瀏覽器返回頁(yè)數(shù)據(jù)顯示的不對(duì)，我查了半天原因：需要監(jiān)聽(tīng)瀏覽器的回退按鈕，并阻止其默認(rèn)事件。

具體操作方法如下：

1、掛載完成后，判斷瀏覽器是否支持popstate

mounted(){
   if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', this.cancel, false);
 }
 },

2、頁(yè)面銷(xiāo)毀時(shí)，取消監(jiān)聽(tīng)。否則其他vue路由頁(yè)面也會(huì)被監(jiān)聽(tīng)

 destroyed(){
 window.removeEventListener('popstate', this.cancel, false);
 }

3、將監(jiān)聽(tīng)操作寫(xiě)在methods里面，removeEventListener取消監(jiān)聽(tīng)內(nèi)容必須跟開(kāi)啟監(jiān)聽(tīng)保持一致，所以函數(shù)拿到methods里面寫(xiě)

 cancel: function() {
   if(this.orderId){
     this.$router.push({
      name:"orderList",
      params: {id:this.orderId},
        });
   }else{
   this.$router.go(-1);
   }
  },

補(bǔ)充知識(shí)：vue-router組件內(nèi)導(dǎo)航守衛(wèi)判斷返回按鈕

組件內(nèi)導(dǎo)航守衛(wèi)會(huì)出現(xiàn)無(wú)法攔截$router.go(-1)或者物理返回按鈕，在攔截函數(shù)外包裹setTimeout即可。具體原因還未發(fā)現(xiàn)。

 setTimeout(() => {
  this.$confirm('編輯的頁(yè)面布局尚未保存，確定離開(kāi)？', '提示', {
   confirmButtonText: '確定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   next()
   return
  }).catch(() => {
   this.$message({
    type: 'info',
    message: '已取消'
   })
   next(false)
   return
  })
 }, 500)

以上這篇vue監(jiān)聽(tīng)瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3+Hooks實(shí)現(xiàn)4位隨機(jī)數(shù)和60秒倒計(jì)時(shí)的示例代碼
Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實(shí)現(xiàn)4位隨機(jī)數(shù)和60秒倒計(jì)時(shí)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-04-04
Vue封裝的標(biāo)準(zhǔn)漏斗圖教程
文章展示了基于Vue封裝的標(biāo)準(zhǔn)漏斗圖的代碼,包括權(quán)重算法、滾輪監(jiān)聽(tīng)和點(diǎn)擊示例功能,旨在提供實(shí)用的圖表展示技巧
2025-02-02
超簡(jiǎn)單的Vue.js環(huán)境搭建教程
這篇文章主要為大家分享了一份超簡(jiǎn)單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue實(shí)現(xiàn)自定義視頻和圖片上傳的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)自定義視頻和圖片上傳的功能，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-04-04
Vue中的Ajax?配置代理slot插槽的方法詳解
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-06-06
基于vue-cli創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)及說(shuō)明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)及說(shuō)明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
2017-11-11
Javascript對(duì)象及Proxy工作原理詳解
這篇文章主要為大家介紹了Javascript對(duì)象及Proxy工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue 3開(kāi)發(fā)中VueUse強(qiáng)大Hooks庫(kù)
VueUse提供了一個(gè)豐富且強(qiáng)大的Hooks庫(kù),可以幫助開(kāi)發(fā)者快速實(shí)現(xiàn)各種功能,提高開(kāi)發(fā)效率,本文來(lái)詳細(xì)的介紹一下,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08
vue性能優(yōu)化之cdn引入vue-Router的問(wèn)題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue.js之VNode的使用
這篇文章主要介紹了Vue.js之VNode的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04