vuejs / nuxtjs：使用新参数更新url会将所有数据重置为初始值

Question

我有一个类别/名称的视图。当我加载此视图（例如类别/人像）时，一切正常。但是，如果我将url更改为category / travel，我的所有数据都会重置为初始值。

那是我的代码

<template>
  // navigation
  <nuxt-link
    v-for="(category, index) in categories"
    :to="'/category/' + category.name"
  >
</template>

data() {
  return {
    galleriesFiltered: null,
    category: {},
    testData: 'INIT',
    thumbs: null
  }
},
computed: {
  ...mapGetters('album',[
    'categories',
    'galleries'
  ])
},
//watch for updates in my url and load new data
watch: {
  '$route.params.name'(value){
   this.getData(value);
  },
},
mounted() {
  this.getData(this.$router.currentRoute.params.name);
},
methods: {
  getData(name) {
    console.log('load category', name);
    this.testData = 'set new DATA';
    //get current category
    this.category = this.categories.find(category => {
      return category.name === name
    });
    //get all related galleries to this category
    this.galleriesFiltered = this.galleries.filter(gallery => {
      return gallery.category_id === this.category.id
    })
    console.log(this.galleriesFiltered); //always outputs my galleries
  },
}

因此，在开发工具中，第一次加载页面后，我可以看到此信息。这样可行

当我导航到新类别时，我的所有数据都会被重置。但是，如果我记录getData（）。我得到正确的值，但它不会更新我的数据对象。它只是被重置...

任何想法我在做什么错吗？

Answer 1

尝试

key: to => to.name,
...
async asyncData (){

这样，您的页面组件不会重新加载，但同时会触发asyncData。

顺便说一句，在nuxt中（尤其是如果您使用SSR），您不应监视路由参数，也不应触发已安装的挂钩中的数据提取。 This是应该怎么做。