vue監(jiān)聽路由變化的幾種方式小結(jié)
更新時間：2022年05月26日 09:22:13 作者：star-1331
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
監(jiān)聽路由變化的幾種方式小結(jié)
vue頁面開發(fā)中，我們經(jīng)常需要根據(jù)路由的變化去實現(xiàn)一些操作，那么如何監(jiān)聽路由的變化呢？當(dāng)然是利用VUE中的watch，請看代碼。
一、監(jiān)聽路由從哪兒來到哪兒去
watch:{
?? ?$route(to,from){
?? ? ?console.log(from.path);//從哪來
?? ? ?console.log(to.path);//到哪去
?? ?}
}二、監(jiān)聽路由變化獲取新老路由信息
?watch:{
? ? $route:{
? ? ? handler(val,oldval){
? ? ? ? console.log(val);//新路由信息
? ? ? ? console.log(oldval);//老路由信息
? ? ? },
? ? ? // 深度觀察監(jiān)聽
? ? ? deep: true
? ? }
? }三、監(jiān)聽路由變化觸發(fā)方法
methods:{
? getPath(){
? ? console.log(1111)
? }
},
watch:{
? '$route':'getPath'
}四、全局監(jiān)聽路由
在app.vue的create種加入下面代碼，然后進(jìn)行判斷
this.$router.beforeEach((to, from, next) => {
? ? console.log(to);
? ? next();
});如何在組件中監(jiān)聽路由參數(shù)的變化？
當(dāng)使用路由參數(shù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。
因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。
那如果我們要在組件中監(jiān)聽路由參數(shù)的變化,就只能通過watch (監(jiān)測變化) $route 對象,或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)。
方式一: 監(jiān)聽 $route
const User = {
? template: '...',
? watch: {
? ? $route(to, from) {
? ? ? // 對路由變化作出響應(yīng)...
? ? }
? }
}方式二：通過組件內(nèi)的導(dǎo)航守衛(wèi)
beforeRouteUpdate ,（和created(){}生命周期函數(shù)同級別)
const User = {
? template: '...',
? beforeRouteUpdate(to, from, next) {
? ? // react to route changes...
? ? // don't forget to call next()
? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼
這篇文章主要介紹了vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼，幫助大家更好的利用python處理圖片，感興趣的朋友可以了解下2020-12-12
由于開發(fā)需要,我需要在登錄成功請求成功后,調(diào)用父窗口的一個點擊事件方法,這篇文章主要給大家介紹了關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了在 Vue.js中優(yōu)雅地使用全局事件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue首屏加載過慢出現(xiàn)白屏的6種優(yōu)化方案匯總
vue項目打包上線后,首次打開會發(fā)現(xiàn)加載很慢,出現(xiàn)白屏的問題,下面這篇文章主要給大家介紹了關(guān)于Vue首屏加載過慢出現(xiàn)白屏的6種優(yōu)化方案,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在Vue實例中,data屬性是用戶定義的用于存儲數(shù)據(jù)的對象,而_data是Vue內(nèi)部用于存儲數(shù)據(jù)的對象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下2023-12-12
最近在使用vue的時候,遇到一個需求,實現(xiàn)左右div可通過中間部分拖拽調(diào)整寬度，本文就整理一下，分享給大家，有興趣的可以學(xué)習(xí)2021-06-06
本篇文章主要介紹了vue-cli入門之項目結(jié)構(gòu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04