Question

类别组件

<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);
    }

它应调用getCategoryProductsAction来调用我的API并根据router-link参数进行过滤。

Answer 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()
     }
  }
}

查看更多：https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation

Answer 2

我希望在Vue.js中使用手表生命周期。

基本上，这是在观察您的路线，当路线发生变化时，您可以告诉它运行功能。

示例：

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

}

VueJS路由器链接不会更新组件内容

2 个答案: