title: Vue-router 檢測路由變化
date: 2018-12-03 22:05:12
tags: [Vue]
categories: Vue
起因
在編寫仿CNode社區(qū)項目中诉植，點擊router-link匾嘱，地址欄中的地址已經改變了滚躯，然而并沒有跳轉路由，故記此博客号坡。
原因
在我的 Article 組件中，點擊側邊欄的文章耕捞，卻沒有跳轉頁面负溪。
原來是因為，雖然地址欄的地址變化了婴渡，但實際上只有參數(shù)發(fā)生了改變（從/topic/a變化到/topic/b）幻锁，這樣的話原來的組件實例會被復用，組件的生命周期鉤子不會再被調用边臼。因為渲染的是同一個組件哄尔，比起銷毀再創(chuàng)建，復用更高效柠并。
解決
用watch選項監(jiān)測$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()
}
}
當路由變化就觸發(fā)getArticleData方法岭接，post的數(shù)據(jù)改變了置谦，頁面就會重新渲染了
