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,},]},

vue中使用watch监听$route 无效问题相关推荐

Vue 中使用watch监听$route 无效问题
Vue 中使用watch监听$route失效问题! 今天在项目操作中发现一个问题,在watch里面监听$route变化,发现并没有监听到,查阅了一些资料最终解决,现写出与大家共同分享,也忘出现此问题的 ...
Vue中数组变动监听
Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定,即使用Object.defineProperty()来实现对属性的劫持,但是Object.defineProperty()中的set ...
Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
vue 执行函数this_在vue中使用回调函数,this调用无效的解决
let self = this //使用新变量替换this,以免this无效 //updatestudentinfotoserver是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据, ...
Vue watch监听详解，一篇文章彻底搞懂Vue2/Vue3中的watch监听
watch监听在vue2和vue3中的用法详解(全) Vue2中的watch用法 Vue3中的watch用法首先写一个vue页面 <template><div><h1& ...
vue中如何深度监听一个对象？
大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...
vue数据请求与监听
框架级的数据请求 axios ( 第三方库 - 别人封装好的库 ) fetch ( javascript 原生提供 ) vue数据请求的发展 vue-resource ( Vue 以前自己封装使用的请 ...
vue原理：vue中是如何监听数组变化？
我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就 ...
watch中的深度监听
watch 用于观察一个表达式或computed函数在Vue.js实例上的变化.回调函数调用时会从参数得到新数据(new value)和旧数据(old value).表达式只接受以点分割的路径,例如o ...

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

vue中使用watch监听$route 无效问题相关推荐

最新文章

热门文章