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