Vue js v-link相同路由不更新内容

Question

如果我在路线上：

person/:slug

我点击一个链接：

<div v-for="person in persons" v-link="{ name: 'person', params: { slug: person.slug }}">

URL 将更改参数，但实际内容/组件不会更新。如果我点击刷新它会因为 URL 更新。我尝试了 canReuse 属性但没有任何运气。

路线：

router.map({
    '/': {
        name: 'search',
        component: Search
    },
    '/person/:slug': {
        name: 'person',
        component: Person
    }
})

成分：

<template>
    {{ person.slug }}
</template>


<script>
    import PersonRepository from '../person-repository.vue'

    export default {
        data () {
            return { person: null }
        },
        asyncData (resolve, reject) {
            return PersonRepository.get(this, this.$route.params.slug).then((person) => {
                return { person: person }
            })
        }
    }
</script>

Answer 1

您是否尝试过使用路由器挂钩而不是异步数据？现在推荐的方式是router hooks。

您特别需要数据挂钩： http://vuejs.github.io/vue-router/en/pipeline/data.html

在激活钩子解析后，在激活阶段调用传入组件。当路由发生变化并且当前组件被重用时也会调用它。使用此钩子在当前组件上加载和设置数据。

export default {
    data () {
        return { person: null }
    },
    route:{ 
        data: function (transition) {
            return PersonRepository.get(this, this.$route.params.slug).then((person) => {
                return { person: person }
            })
        }
    }
}

通过返回承诺，您的组件将在承诺解决后重新加载。$loadingRouteData此外，您还可以访问可用于显示加载微调器或其他方式的属性。