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

這個(gè)三個(gè)菜單使用的是同一張數(shù)據(jù)表. 所以我們肯定只寫一個(gè) list,add,edit頁(yè)面的. 然后根據(jù)進(jìn)入頁(yè)面的路由來(lái)判斷屬于哪一個(gè)分類.并跳轉(zhuǎn)指定分類的 新增,編輯, 和調(diào)用對(duì)應(yīng)的列表接口頁(yè)面

由于三個(gè)模塊使用的相同的頁(yè)面.所以需要配置三份路由.并且做出頁(yè)面區(qū)分 .然后現(xiàn)在遇到的問(wèn)題是. 由于三個(gè)菜單雖然路由不同但是頁(yè)面是同一個(gè)頁(yè)面 .切換菜單的時(shí)候并不會(huì)再出觸發(fā)vue的鉤子函數(shù) .然后三個(gè)list頁(yè)面查詢的數(shù)據(jù)相同.也就是不會(huì)觸發(fā)查詢方法.導(dǎo)致不能切換條件.

然后網(wǎng)上搜了一下 watch監(jiān)聽(tīng)時(shí)間. 發(fā)現(xiàn)可以通過(guò)監(jiān)聽(tīng)實(shí)現(xiàn)路由變化的時(shí)候觸發(fā)列表數(shù)據(jù)加載方法 . 具體代碼如下

列表頁(yè)面的路由分別在list后面添加了1,2,3 用于區(qū)分是哪個(gè)頁(yè)面

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

然后這樣可以切換路由的時(shí)候,重新拉取列表數(shù)據(jù). 同時(shí)create方法里面也需要調(diào)用search.因?yàn)槁酚杀O(jiān)聽(tīng)只作用于本頁(yè)面.其它頁(yè)面切換路由到這個(gè)菜單時(shí)不會(huì)觸發(fā).

created () { let path = this.$route.path; this.type = path.substr(path.lastIndexOf('/') + 1); this.search();},總結(jié)

在實(shí)際開(kāi)發(fā)中,可以根據(jù)自己的需求選擇監(jiān)聽(tīng)屬性

watch:{ //監(jiān)聽(tīng)路由變化 $route( to , from ){ console.log( to , from )// to , from 分別表示從哪跳轉(zhuǎn)到哪，都是一個(gè)對(duì)象// to.path ( 表示的是要跳轉(zhuǎn)到的路由的地址 ); }}

以上就是Vue路由監(jiān)聽(tīng)實(shí)現(xiàn)同頁(yè)面動(dòng)態(tài)加載的示例的詳細(xì)內(nèi)容，更多關(guān)于Vue路由監(jiān)聽(tīng)實(shí)現(xiàn)同頁(yè)面動(dòng)態(tài)加載的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！