溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在Vue中利用路由監(jiān)聽實現同頁面動態(tài)加載

發(fā)布時間:2021-05-21 15:32:19 來源:億速云 閱讀:190 作者:Leah 欄目:開發(fā)技術

怎么在Vue中利用路由監(jiān)聽實現同頁面動態(tài)加載?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

怎么在Vue中利用路由監(jiān)聽實現同頁面動態(tài)加載

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

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

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

總結

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

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

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉頁面都要請求所有數據和dom,可以大大提升訪問速度和用戶體驗。

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業(yè)資訊頻道,感謝您對億速云的支持。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI