vue路由參數變化刷新數據

當路由到某個組件時,由於組件會復用,所以生命周期函數不會再次執行,

如果這個組件是模板組件,靠傳入不同數據來顯示的.那么,可能會發生參數變化了但頁面數據卻不變化.

 

問題

假如有個組件 info.vue

路由path如下

1. /user/info/23　　// 23是參數,下面34也是參數

2. /user/info/34

希望通過參數來刷新組件頁面數據.刷新數據的方法在Vue生命周期函數的created方法里調用.

當改變參數時,頁面並沒有變化.因為,路由只是參數變化了,path並沒變化,組件還是這個info.vue組件.

此時,組件復用,生命周期函數不再執行,所以刷新數據的方法也就沒機會執行了.

原因見管網描述 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

 

研究

官網上推薦使用watch,監控路由變化,將取數據方法在watch中調用,

或者是 beforeRouteUpdate 這個路由生命周期函數,https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB

 

經過測試,當路由的參數變化之后,數據刷新了,

但是出了個新問題,就是當路由改變時,再回到改變前的路由時,又不刷新了.

 

假設當前路由是

/user/info/34

跳到路由

/home

然后再跳回來到

/user/info/34

這里,頁面又不動了.

 

經過研究發現,配合使用這兩個路由周期函數,能解決這問題

beforeRouteEnter 和 beforeRouteUpdate

前者在進入路由所在組件時(路由發生變化)執行,

后者在路由的參數變化時執行

 

在這兩個方法里執行刷新數據,兩者時機對應兩種切換路由操作.經過實踐,要兩者配合才行.否則會有bug.

如果只用其一,那么,當路由不變,只變參數時,就刷新不了列表

如果只用其二,那么,當路由地址變化時,就刷新不了列表

 

最后,沒有使用watch,而是使用了下面的方法

總結

這兩個路由周期函數的時機正好是在路由不變參數變化時執行和路由變化時執行.所以能解決上述BUG.

 

// 這個方法不用調用this,因為此時機組件還沒生成,所以無this
// 要調用刷新數據方法時,需要寫在next回調里,
// next是在組件生成后會調用
beforeRouteEnter(to: any, from: any, next: any) {
        next((vm: any) => {
            vm.updateList(to.params.id);
        });
    }

// 這個方法是路由不變,只變參數時執行
private beforeRouteUpdate(to: any, from: any, next: any) {
        this.updateList(to.params.id);
        next();
    }

// 更新數據方法
private updateList(userId: string) {
        
    }