Use watch to monitor $route failure in Vue!
I found a problem in the operation of the project today. I listened to the $route change in the watch and found that it was not monitored. I checked some information and finally solved it. I now write it to share with you, and the students who forgot to have this problem can also solve it smoothly.
路由词典：
{
name: 'secondUser ',
component: secondUser,
path: '/secondUser',
}
-------------------------------------------------------------------------------------------------------------------
页面中监听
watch:{
'$route'(to,from) {
console.log(to,from);
}
},
As a result, we found that after the route jump, our console did not output anything, and added a breakpoint and found that it did not execute it. It turned out that we used watch to monitor routing changes. Our routing must have sub-routes, and it is also tight to monitor changes. Limited to the parent-child routing, that is, our routing must have a child routing, and watch will be called during the child routing jump process, and it can be successfully monitored!
我们为secondUser路由增加了两个子路由！
-------------------------------------------------------------------------------------------------------------------
我们发现在进行父子路由跳转过程中，我们的watch可以坚挺到路由变化了！
--------------------------------------------------------
{
name: 'secondUser ',
component: secondUser,
path: '/secondUser',
children: [
{
path: 'user',
name: 'user',
component: user,
},
{
path: 'userName',
name: 'userName',
component: userName,
},
]
},
Watch monitoring $route fails in the level routing subcomponent
{
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
}
}
]
}
The above routing configuration watch monitors in sub-components sub_index_A, sub_index_B, and sub_index_A. $route is invalid.