Vue.js: Cannot trigger ready of a component when only a param of route change

Question

I'm using Vue.js 1.0 with vue-router.

I have a component UserList.vue :

<template>
  <a v-link="{name: "user_list", params: {cat: 'admin'}}">admin</a>
  <a v-link="{name: "user_list", params: {cat: 'normal'}}">normal</a>
</template>

<script>
  export default = {
    methods: {
      reload() {
        // Do the data reloading.
      },
    },
    ready() {
      console.log(this.$route.params);
      reload();
    },
  };
</script>

I have configured the router item to be:

router.map({
  '/home': {
    name: 'home',
    component: Home,
  },
  '/user/:cat': {
    name: 'user_list',
    component: UserList,
  },
});

So, when I switch to /user/admin from the Home.vue component, the ready() function of UserList.vue is triggered.

But when I switch between /user/admin and /user/normal , the ready() function is not triggered.

But I want to load the data then, How to make a stable way to trigger the ready() function?

Answer 1

This answer applies to router version 0.7 with Vuejs version 1.x

You need to set the canReuse to false to always trigger the ready hook because as the documentation states, it is not triggered on subsequent uses when view is reused which is the default setting.

<script>
  export default = {
    route:{
     canReuse:false //or a function returning boolean
    }
    methods: {
      reload() {
        // Do the data reloading.
      },
    },
    ready() {
      console.log(this.$route.params);
      reload();
    },
  };
</script>

The canReuse documentation has a few more details. This setting is no more available in newer versions.

Answer 2

After a long period to try, I found it is hard to trigger the ready() function.

But we can change the redirection to a method rather than v-link:

<template>
  <a @click="setCat('admin')">admin</a>
  <a @click="setCat('normal')">normal</a>
</template>

And then manually call the reload() function in the method:

export default {
  // ...
  methods: {
    setCat(cat) {
      this.$route.params.cat = cat;
      this.reload();
      this.$router.go({name: 'user_list', params: {cat}});
    }
  }
}