本人前端菜鳥一名，一直致力于不間斷的生產管理后臺的bug，并以此自勉自勵。近幾天接到一個需求，網上也搜了很多例子，但是沒有從根本上解決。在這里記錄一下我自己的解決的過程，這也是第一次在掘金發言，求輕虐。
需求描述：
有A、B兩個頁面，需要將A頁面的orderId用路由傳參的方式傳入到B頁面執行數據關聯查詢，然后顯示在B頁面
需求解析：
如果是你，你拿到這個需求，應該很容易想到在B頁面對路由變化做watch，然后獲取參數執行查詢數據的方法完事。
解決需求
A頁面中：
|
1
2
3
4
5
6
7
8
|
const route = { name: 'BpageName', params: { orderId: this.tableData[index].id }, meta: { title: 'B頁面' } }this.$router.push(route) |
push一個路由重新打開B頁面
然后B頁面中接受路由傳參：
|
1
2
3
4
5
6
|
@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頁面
|
1
2
3
|
if (this.$route.fullPath === 'A頁面路由路徑') { // do something} |
懷著激動的心情去試了試
|
1
2
3
4
5
6
|
@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()。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
private activatedFlag: boolean = falseactivated () { 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就去獲取數據。
|
1
2
3
4
5
6
7
8
9
10
11
|
private activatedFlag: boolean = falseactivated () { this.activatedFlag = true if (this.$route.params.orderId && this.activatedFlag) { this.getList(this.$route.params.orderId) }}deactivated () { this.activatedFlag = false;} |
大功告成，終于解決了。大佬們求輕吐槽代碼，有更好的意見或建議，歡迎評論留言指導。
以上就是vue監聽路由變化時watch方法會執行多次的原因及解決的詳細內容，更多關于vue watch方法會執行多次的原因及解決的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6948684670225940487
