Vue刷新/重載當前路由獲取數據

  1. Vue如何刷新或重載當前路由來更新數據?
  2. Vue如何監聽同一路由加載事件?

方案:能夠利用路由的quey參數,使用watch進行檢測router的變化實現監聽。下面是一個實踐示例javascript

vue刷新數據固然簡單,直接調用合數據的方法就行。
可是,每每業務需求的不一樣,實現流程或思路也會不一樣。下面有一個業務需求場景vue

  • 頭部下拉列出倉庫,
  • 切換倉庫,左側的菜單不變,都是同樣的,
  • 切換倉庫時都會定位到【通知】界面上。通知界面的路由是: /notice
  • 切換後,通知要加載對應的倉庫數據

在這裏插入圖片描述

方案1:利用路由的quey參數,使用watch進行檢測router的變化實現監聽
切換倉庫時,對路由進行傳參java

watch: {
  // 利用watch方法檢測路由變化:
  '$route': function (to, from) {
    // 能夠拿到目標參數 to.query.id 去再次請求數據接口
     if(to.query.id){
         // 加載表格數據
         this.getList(to.query.id);
     }
  }
 },

方案2:使用store方案
使用computed計算,切換倉庫時commit store,通知列表界面獲取store的流數據,進行請求。this

相關文章
相關標籤/搜索