Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例

更新時間：2021年05月21日 11:01:53 作者：java_web攻城獅

本文主要介紹了Vue基于路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例，重點在于切換路由的時候,重新拉取列表數(shù)據(jù)，接下來看看實現(xiàn)方法吧

場景分析

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

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

開發(fā)

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

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

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

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

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

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

總結(jié)

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

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

以上就是Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例的詳細內(nèi)容，更多關(guān)于Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: