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

這個三個菜單使用的是同一張數據表. 所以我們肯定只寫一個 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路由監聽實現同頁面動態加載的資料請關注好吧啦網其它相關文章！