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

你可能感兴趣的