vue監(jiān)聽路由變化的幾種方式小結
更新時間：2022年05月26日 09:22:13 作者：star-1331
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
監(jiān)聽路由變化的幾種方式小結
vue頁面開發(fā)中，我們經(jīng)常需要根據(jù)路由的變化去實現(xiàn)一些操作，那么如何監(jiān)聽路由的變化呢？當然是利用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種加入下面代碼，然后進行判斷
this.$router.beforeEach((to, from, next) => {
? ? console.log(to);
? ? next();
});如何在組件中監(jiān)聽路由參數(shù)的變化？
當使用路由參數(shù)時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。
因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。
那如果我們要在組件中監(jiān)聽路由參數(shù)的變化,就只能通過watch (監(jiān)測變化) $route 對象,或使用 beforeRouteUpdate 的組件內守衛(wèi)。
方式一: 監(jiān)聽 $route
const User = {
? template: '...',
? watch: {
? ? $route(to, from) {
? ? ? // 對路由變化作出響應...
? ? }
? }
}方式二：通過組件內的導航守衛(wèi)
beforeRouteUpdate ,（和created(){}生命周期函數(shù)同級別)
const User = {
? template: '...',
? beforeRouteUpdate(to, from, next) {
? ? // react to route changes...
? ? // don't forget to call next()
? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要和大家一起簡單學習一下vue指令：directive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
SVG指可伸縮矢量圖形,用來定義用于網(wǎng)絡的基于矢量的圖形,下面這篇文章主要給大家介紹了關于如何在vue3+vite項目中使用svg的相關資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了三種方式解決vue中v-html元素中標簽樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
今天小編大家分享一篇Vue 實現(xiàn)html中根據(jù)類型顯示內容，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
本篇文章主要介紹了如何實現(xiàn)一個簡單的 vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
手勢鎖是常見的一種手機解鎖方式，本文主要介紹了vue封裝一個圖案手勢鎖組件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了解決vue-router路由攔截造成死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3中處理不同數(shù)據(jù)結構JSON的實現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結構JSON的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
源碼的重要性相信不用再多說什么了吧,特別是用Vue 框架的,一般在面試的時候面試官多多少少都會考察源碼層面的內容,下面這篇文章主要給大家介紹了關于vue3源碼剖析之簡單實現(xiàn)的相關資料,需要的朋友可以參考下2021-09-09
WebStorm是一款優(yōu)秀的前端開發(fā)IDE,之前一直可以調試Vue項目,下面這篇文章主要給大家介紹了關于使用Webstorm調試Vue代碼的詳細圖文教程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-05-05