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

你有沒有試過這種使用路由器掛鉤，而不是異步數據？推薦的方式是路由器掛鉤。

特別需要的數據鉤：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，您可以使用該屬性顯示加載微調框或其他。