Vue wacth路由

在用vue开发spa的时候，遇到过这样一种情况，路由地址为http://localhost:8080/m/list/305038信息详情页面。
如图所示：

图片.png

图片.png

但是在这信息详情页面下方有推荐信息，推荐信息的路由为http://localhost:8080/m/list/305004。相同路由具有不同参数的链接，后台又是根据信息id获取数据的，我们希望在vue中created方法里从根据id从后台获取信息详情。

created () {
   this.loadData();
},

这是点击推荐信息会发现根本没有变化，路由参数变了，没有像预想的一样，调用created()方法中的this.loadData()向后台请求加载数据。开始想是不是由于生命周期钩子用的不对，紧接着又用了几个钩子例如activated() mounted() updated()发现皆不会被触发。那该怎么办？ 联想到vue的watch来观察值的变化，试试能不能观察路由参数变化，如果变化了，我就调用this.loadData()。没想到还真的行，代码如下:

watch:{
   "$route":"loadData"
}

看代码知其意，监听route，如果改变了则调用loadData方法。解决问题，嘿嘿。可能是对vue了解不够深入，目前还没有发现更好的解决方案。如果你有快快在下方留言告诉我吧。