失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Vue 中使用watch监听$route 无效问题

Vue 中使用watch监听$route 无效问题

时间:2019-06-16 16:31:28

相关推荐

Vue 中使用watch监听$route 无效问题

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 无效问题》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。