欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年09月09日 09:40:22   作者：小白阿斯蘭  
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天測試給我報了個bug說點(diǎn)擊瀏覽器返回頁數(shù)據(jù)顯示的不對，我查了半天原因：需要監(jiān)聽瀏覽器的回退按鈕，并阻止其默認(rè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);
   }
  },

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

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

相關(guān)文章

  • 詳解Vue.js和layui日期控件沖突問題解決辦法

    詳解Vue.js和layui日期控件沖突問題解決辦法

    這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • vue3使用videojs播放m3u8格式視頻教程

    vue3使用videojs播放m3u8格式視頻教程

    m3u8是一種基于HTTP Live Streaming（HLS）文件視頻格式,它主要是存放整個視頻的基本信息和分片(Segment)組成,下面這篇文章主要給大家介紹了關(guān)于vue3使用videojs播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下
    2023-06-06
  • vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除

    vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除

    這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析

    Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析

    這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-03-03
  • clipboard在vue中的使用的方法示例

    clipboard在vue中的使用的方法示例

    這篇文章主要介紹了clipboard在vue中的使用的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • 詳細(xì)聊聊vue組件是如何實(shí)現(xiàn)組件通訊的

    詳細(xì)聊聊vue組件是如何實(shí)現(xiàn)組件通訊的

    組件間通信簡單來說就是組件間進(jìn)行數(shù)據(jù)傳遞,就像我們?nèi)粘５拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實(shí)現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • Vue.js 的 watch函數(shù)基本用法

    Vue.js 的 watch函數(shù)基本用法

    watch 函數(shù)是 Vue.js 提供的一個強(qiáng)大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實(shí)現(xiàn)異步數(shù)據(jù)請求、表單驗(yàn)證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下
    2024-08-08
  • nextTick能否獲取到最新dom原理解析

    nextTick能否獲取到最新dom原理解析

    這篇文章主要為大家介紹了nextTick能否獲取到最新dom原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-11-11
  • vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例

    vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例

    這篇文章主要介紹了vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結(jié)合實(shí)例形式分析了vue.js組件間通信相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • vue新手入門出現(xiàn)function () { [native code] }錯誤的解決方案

    vue新手入門出現(xiàn)function () { [native code]&nbs

    這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04

最新評論