Vue路由監聽實現同頁面動態加載的示例

Posted on by

場景分析

在系統中一個模塊有三個子模塊. 業務數據中可以直接根據類型去區分這個三個子模塊的歸屬. 通常情況下.我們是寫在同一個模塊中然後去選擇業務類型. 但是業主要求,將這個拆分成三個菜單.用戶根據自己的需求去選擇需要使用的模塊.

這個三個菜單使用的是同一張數據表. 所以我們肯定隻寫一個 list,add,edit頁面的. 然後根據進入頁面的路由來判斷屬於哪一個分類.並跳轉指定分類的 新增,編輯, 和調用對應的列表接口頁面

開發

由於三個模塊使用的相同的頁面.所以需要配置三份路由.並且做出頁面區分 .然後現在遇到的問題是. 由於三個菜單雖然路由不同但是頁面是同一個頁面 .切換菜單的時候並不會再出觸發vue的鉤子函數 .然後三個list頁面查詢的數據相同.也就是不會觸發查詢方法.導致不能切換條件.

然後網上搜瞭一下 watch監聽時間. 發現可以通過監聽實現路由變化的時候觸發列表數據加載方法 . 具體代碼如下

列表頁面的路由分別在list後面添加瞭1,2,3 用於區分是哪個頁面

watch: {
    '$route.path': function (newVal, oldVal) {
        // 參數 新舊路由path  type是全局定義的 三個類型菜單
        this.type = newVal.substr(newVal.lastIndexOf("/") + 1);
        this.search();
    }
},

然後這樣可以切換路由的時候,重新拉取列表數據. 同時create方法裡面也需要調用search.因為路由監聽隻作用於本頁面.其它頁面切換路由到這個菜單時不會觸發.

created () {
    let path = this.$route.path;
    this.type = path.substr(path.lastIndexOf("/") + 1);
    this.search();
},

總結

在實際開發中,可以根據自己的需求選擇監聽屬性

watch:{  
    //監聽路由變化
    $route( to , from ){   
       console.log( to , from )
        // to , from 分別表示從哪跳轉到哪，都是一個對象
        // to.path  ( 表示的是要跳轉到的路由的地址  );
     }
}

以上就是Vue路由監聽實現同頁面動態加載的示例的詳細內容，更多關於Vue路由監聽實現同頁面動態加載的資料請關註WalkonNet其它相關文章！

推薦閱讀：