- Vue如何刷新或重載當前路由來更新數據?
- Vue如何監聽同一路由加載事件?
方案:可以利用路由的quey參數,使用watch進行檢測router的變化實現監聽。下面是一個實踐示例
vue刷新數據當然簡單,直接調用合數據的方法就行。
但是,往往業務需求的不同,實現流程或思路也會不同。下面有一個業務需求場景
- 頭部下拉列出倉庫,
- 切換倉庫,左側的菜單不變,都是一樣的,
- 切換倉庫時都會定位到【通知】界面上。通知界面的路由是:
/notice - 切換後,通知要加載對應的倉庫數據
方案1:利用路由的quey參數,使用watch進行檢測router的變化實現監聽
切換倉庫時,對路由進行傳參
watch: {
// 利用watch方法檢測路由變化:
'$route': function (to, from) {
// 可以拿到目標參數 to.query.id 去再次請求數據接口
if(to.query.id){
// 加載表格數據
this.getList(to.query.id);
}
}
},
方案2:使用store方案
使用computed計算,切換倉庫時commit store,通知列表界面獲取store的流數據,進行請求。