Vue-router 检测路由变化

---

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的数据改变了，页面就会重新渲染了