Vue 中使用watch監聽$route失效問題！

今天在項目操作中發現一個問題，在watch里面監聽$route變化，發現并沒有監聽到，查閱了一些資料最終解決，現寫出與大家共同分享，也忘出現此問題的同學也能順利解決

路由詞典： {name: 'secondUser ',component: secondUser,path: '/secondUser', } ------------------------------------------------------------------------------------------------------------------- 頁面中監聽watch:{'$route'(to,from) { console.log(to,from);}},

結果我們發現在路由跳轉后，我們的console并沒有輸出東西，加了斷點發現也并沒有執行到里面，原來，我們用watch監聽路由變化，我們的路由一定要有子路由，監聽變化也緊局限在父子路由中，也就是我們這個路由一定要有子路由，在子路由跳轉過程中會調用watch，能成功監聽！

我們為secondUser路由增加了兩個子路由！ ------------------------------------------------------------------------------------------------------------------- 我們發現在進行父子路由跳轉過程中，我們的watch可以堅挺到路由變化了！ -------------------------------------------------------- {name: 'secondUser ',component: secondUser,path: '/secondUser',children: [{path: 'user',name: 'user',component: user,},{path: 'userName',name: 'userName',component: userName,},]},

watch監聽$route在平級路由子組件中失效

{path: '/index_1',name: 'Index_1',component: () => import('@/views/index_1.vue'),meta: {title: '首頁_1',requireAuth: true},children: [{path: '/index_1/sub_index_A',name: 'sub_index_A',component: () => import('@/views/sub_index_1/sub_index_A.vue'),meta: {title: '子組件_A',requireAuth: true}},{path: 'sub_index_B',name: 'sub_index_B',component: () => import('@/views/sub_index_1/sub_index_B.vue'),meta: {title: '自組件_B',requireAuth: true}},{path: 'sub_index_C',name: 'sub_index_C',component: () => import('@/views/sub_index_1/sub_index_C.vue'),meta: {title: '自組件_C',requireAuth: true}}]}

如上路由配置 watch 在子組件sub_index_A、sub_index_B、sub_index_A中監聽$route無效

總結

以上是生活随笔為你收集整理的Vue 中使用watch监听$route 无效问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。