vue路由监听问题

背景

希望路由变化时做些操作，这里控制台输出内容为例

vue代码起初是这样，在/button对应组件使用watch：

监听失败，控制台无输出。

原因

所要监听的路由/button不是其子路由，比如你在/a下只能监听/a这个路由的子路由的变化

解决

把watch相关代码搞到/button父路由对应的组件去。

这里父路由“/”对应组件为Home

再次测试成功：

其他

如果想监听路由参数变化，如直接在浏览器地址栏.../detail/1改为.../detail/2的详情页面，组件会复用，路由变化成功而数据依然是id=1的数据，为了解决这个不合理现象，在组件里直接可以通过beforeRouteUpdate监听路由变化，然后再次获取新id请求后台，将组件的数据属性更新即可