vue監聽路由變化時watch方法會執行多次的原因及解決

本人前端菜鳥一名,一直致力於不間斷的生產管理後臺的bug,並以此自勉自勵。近幾天接到一個需求,網上也搜瞭很多例子,但是沒有從根本上解決。在這裡記錄一下我自己的解決的過程,這也是第一次在掘金發言,求輕虐。

需求描述:

有A、B兩個頁面,需要將A頁面的orderId用路由傳參的方式傳入到B頁面執行數據關聯查詢,然後顯示在B頁面

需求解析:

如果是你,你拿到這個需求,應該很容易想到在B頁面對路由變化做watch,然後獲取參數執行查詢數據的方法完事。

解決需求

A頁面中:

const route = {
        name: 'BpageName',
        params: { orderId: this.tableData[index].id },
        meta: {
          title: 'B頁面'
        }
      }
this.$router.push(route)

push一個路由重新打開B頁面

然後B頁面中接受路由傳參:

@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通過監聽傳參的變化來重新復制參數
    if (newParams) {
      this.getList(newParams)
    }
}

看起來是不是很簡單?

但是問題來瞭,因為B頁面做瞭keep-alive頁面緩存,第一次路由切換的時候routeParamsChanged方法隻執行一次,達到瞭預期效果。但是,如果關閉B頁面或者不關閉B頁面的情況下再從A頁面跳轉到B頁面的情況下就會觸發兩次或多次routeParamsChanged方法。
查瞭很多資料,vue項目watch內的函數重復觸發問題 這裡有解釋造成這種情況的原因。

解決方法1: 判斷fullPath是不是A頁面

if (this.$route.fullPath === 'A頁面路由路徑') {
    // do something
}

懷著激動的心情去試瞭試

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通過監聽傳參的變化來重新復制參數
    if (newParams === '/Apage') {
      this.getList(newParams)
    }
}

結果還是不行,routeParamsChanged方法還是會執行兩次或多次。 解決方法2 添加一個flag參數來判斷頁面是否是active狀態,使用keep-alive緩存的組件隻會觸發activated和deactivated事件,所以就在這兩個事件觸發時把flag置為true和false,隻有在flag為true的時候才執行getList()。

private activatedFlag: boolean = false
activated () {
    this.activatedFlag = true;
}

deactivated () {
    this.activatedFlag = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通過監聽傳參的變化來重新復制參數
    if (newParams && this.activatedFlag) {
      this.getList(newParams)
    }
}

這回改解決瞭吧?結果還是不行,routeParamsChanged方法還是會執行兩次或多次。 崩潰ing………

問題解決

借鑒瞭上面的解決方法2,最終在activated ()生命周期鉤子函數中取實現獲取參數且調用獲取數據的方法即可,都不用去監聽路由的變化,隻要獲取瞭this.$route.params.orderId就去獲取數據。

private activatedFlag: boolean = false
activated () {
    this.activatedFlag = true
    if (this.$route.params.orderId && this.activatedFlag) {
      this.getList(this.$route.params.orderId)
    }
}

deactivated () {
    this.activatedFlag = false;
}

大功告成,終於解決瞭。大佬們求輕吐槽代碼,有更好的意見或建議,歡迎評論留言指導。

以上就是vue監聽路由變化時watch方法會執行多次的原因及解決的詳細內容,更多關於vue watch方法會執行多次的原因及解決的資料請關註WalkonNet其它相關文章!