背景
希望路由变化时做些操作,这里控制台输出内容为例
vue代码起初是这样,在/button对应组件使用watch:
监听失败,控制台无输出。
原因
所要监听的路由/button不是其子路由,比如你在/a下只能监听/a这个路由的子路由的变化
解决
把watch相关代码搞到/button父路由对应的组件去。
这里父路由“/”对应组件为Home
再次测试成功:
其他
如果想监听路由参数变化,如直接在浏览器地址栏.../detail/1改为.../detail/2的详情页面,组件会复用,路由变化成功而数据依然是id=1的数据,为了解决这个不合理现象,在组件里直接可以通过beforeRouteUpdate监听路由变化,然后再次获取新id请求后台,将组件的数据属性更新即可