本人前端菜鳥(niǎo)一名，一直致力于不間斷的生產(chǎn)管理后臺(tái)的bug，并以此自勉自勵(lì)。近幾天接到一個(gè)需求，網(wǎng)上也搜了很多例子，但是沒(méi)有從根本上解決。在這里記錄一下我自己的解決的過(guò)程，這也是第一次在掘金發(fā)言，求輕虐。

需求描述：

有A、B兩個(gè)頁(yè)面，需要將A頁(yè)面的orderId用路由傳參的方式傳入到B頁(yè)面執(zhí)行數(shù)據(jù)關(guān)聯(lián)查詢，然后顯示在B頁(yè)面

需求解析：

如果是你，你拿到這個(gè)需求，應(yīng)該很容易想到在B頁(yè)面對(duì)路由變化做watch，然后獲取參數(shù)執(zhí)行查詢數(shù)據(jù)的方法完事。

解決需求

A頁(yè)面中：

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

push一個(gè)路由重新打開(kāi)B頁(yè)面

然后B頁(yè)面中接受路由傳參：

@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通過(guò)監(jiān)聽(tīng)傳參的變化來(lái)重新復(fù)制參數(shù)
    if (newParams) {
      this.getList(newParams)
    }
}

看起來(lái)是不是很簡(jiǎn)單？

但是問(wèn)題來(lái)了，因?yàn)锽頁(yè)面做了keep-alive頁(yè)面緩存，第一次路由切換的時(shí)候routeParamsChanged方法只執(zhí)行一次，達(dá)到了預(yù)期效果。但是，如果關(guān)閉B頁(yè)面或者不關(guān)閉B頁(yè)面的情況下再?gòu)腁頁(yè)面跳轉(zhuǎn)到B頁(yè)面的情況下就會(huì)觸發(fā)兩次或多次routeParamsChanged方法。
查了很多資料，vue項(xiàng)目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問(wèn)題 這里有解釋造成這種情況的原因。

解決方法1： 判斷fullPath是不是A頁(yè)面

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

懷著激動(dòng)的心情去試了試

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通過(guò)監(jiān)聽(tīng)傳參的變化來(lái)重新復(fù)制參數(shù)
    if (newParams === '/Apage') {
      this.getList(newParams)
    }
}

結(jié)果還是不行，routeParamsChanged方法還是會(huì)執(zhí)行兩次或多次。 解決方法2 添加一個(gè)flag參數(shù)來(lái)判斷頁(yè)面是否是active狀態(tài)，使用keep-alive緩存的組件只會(huì)觸發(fā)activated和deactivated事件，所以就在這兩個(gè)事件觸發(fā)時(shí)把flag置為true和false，只有在flag為true的時(shí)候才執(zhí)行g(shù)etList()。

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

deactivated () {
    this.activatedFlag = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通過(guò)監(jiān)聽(tīng)傳參的變化來(lái)重新復(fù)制參數(shù)
    if (newParams && this.activatedFlag) {
      this.getList(newParams)
    }
}

這回改解決了吧？結(jié)果還是不行，routeParamsChanged方法還是會(huì)執(zhí)行兩次或多次。 崩潰ing.........

問(wèn)題解決

借鑒了上面的解決方法2，最終在activated ()生命周期鉤子函數(shù)中取實(shí)現(xiàn)獲取參數(shù)且調(diào)用獲取數(shù)據(jù)的方法即可，都不用去監(jiān)聽(tīng)路由的變化，只要獲取了this.$route.params.orderId就去獲取數(shù)據(jù)。

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;
}

大功告成，終于解決了。大佬們求輕吐槽代碼，有更好的意見(jiàn)或建議，歡迎評(píng)論留言指導(dǎo)。

以上就是vue監(jiān)聽(tīng)路由變化時(shí)watch方法會(huì)執(zhí)行多次的原因及解決的詳細(xì)內(nèi)容，更多關(guān)于vue watch方法會(huì)執(zhí)行多次的原因及解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論