title: Vue-router 检测路由变化
date: 2018-12-03 22:05:12
tags: [Vue]
categories: Vue
起因
在编写仿CNode社区项目中，点击router-link，地址栏中的地址已经改变了，然而并没有跳转路由，故记此博客。
原因
在我的 Article 组件中，点击侧边栏的文章，却没有跳转页面。
原来是因为，虽然地址栏的地址变化了，但实际上只有参数发生了改变（从/topic/a变化到/topic/b），这样的话原来的组件实例会被复用，组件的生命周期钩子不会再被调用。因为渲染的是同一个组件，比起销毁再创建，复用更高效。
解决
用watch选项监测$route变化：
methods: {
getArticleData() {
this.$axios(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`)
.then((res) => {
this.post = res.data.data
this.loading = false
}, (error) => {
console.log(error)
})
}
},
watch: {
'$route'(to, from) {
this.getArticleData()
}
}
当路由变化就触发getArticleData方法，post的数据改变了，页面就会重新渲染了
