VueJS router-link 不更新组件内容答案

【问题标题】：VueJS router-link doesn't update component contentVueJS router-link 不更新组件内容
【发布时间】：2018-12-02 11:45:02
【问题描述】：

分类组件

<ul v-else>
  <li
     v-for="cat in getCategories">
     <router-link :to="{ name: 'ProductsCategory', params: {category_name: cat.name}}">{{ cat.name }}</router-link>
  </li>
</ul>

这工作正常并重定向到正确的链接。

问题是

当我使用 vuex 时，它不会再次调用该状态。

组件脚本

    computed: {
      getLoading () {
        return this.$store.state.companyInfo.loading;
      },
      getCompanyBasicInfo () {
        return this.$store.state.companyInfo.companyBasicInfo;
      },
      getCategories () {
        return this.$store.state.categories.categoriesName;
      },
      getCategoriesLoading () {
        return this.$store.state.categories.loadingState;
      },
      getCataegoryProducts () {
        return this.$store.state.products.getCategoryProducts;
      },
    },
    created() {
      this.$store.dispatch('getCategories', this.$route.params);
      this.$store.dispatch('getCategoryProductsAction', this.$route.params);
      this.$store.dispatch('getCompanyBasicInfo', this.$route.params);
    }

由于router-link 参数，它应该调用getCategoryProductsAction 调用我的API 和过滤器。

【问题讨论】：

标签： api vue.js vuex

【解决方案1】：

这可能是正常的，因为这个组件没有被销毁，但是$route参数发生了变化。

所以你可以看到$route 更改为params.category_name

watch: {
  // when redirect to new category_name, this will be callback
  '$route': (new, old) => {
     if (new.params.category_name !== old.params.category_name) {
        // reload data, same with created()
     }
  }
}

【讨论】：

应该是$route(new, old) {

【解决方案2】：

我更喜欢在 Vue.js 中使用 watch 生命周期。

基本上，它的作用是监视您的路线，当它发生变化时，您可以告诉它运行一个函数。

示例：

  watch: {
// call again the method if the route changes
        '$route': 'initService'

}

【讨论】：