VueJS router-link doesn't update component content

Question

Category component

<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>

This works fine and redirect fine to the correct link.

Problem is

When it redirect it doesn't call again the state while i am using vuex.

Component script

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

It should call getCategoryProductsAction which call my API and filter due to the router-link params.

joaner · Accepted Answer · 2018-06-23 03:25:02Z

3

This may be normal, because this component is not destroyed, but the $route parameters have changed.

So you can watch the $route for params.category_name changed

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

see more: https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation

answered Jun 23, 2018 at 3:25

joaner

7161 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jens Törnell Over a year ago

It should be $route(new, old) {

alexander helsinghof · Accepted Answer · 2019-01-06 20:08:36Z

0

I would prefer to use the watch lifecycle in Vue.js.

Basically what is does is watching your route and when it changes you can tell it to run a function.

example:

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

}

answered Jan 6, 2019 at 20:08

alexander helsinghof

571 silver badge11 bronze badges

Collectives™ on Stack Overflow

VueJS router-link doesn't update component content

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related