Vue.js：仅更改路线参数时，无法触发组件就绪

Question

我正在将Vue.js 1.0与vue-router一起使用。

我有一个组件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>

我已将路由器项配置为：

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

因此，当我从Home.vue组件切换到/user/admin ，将触发UserList.vue的ready()函数。

但是，当我在/user/admin和/user/normal之间切换时，未触发ready()函数。

但是我想然后加载数据，如何以稳定的方式触发ready()函数？

Answer 1

此答案适用于带有Vuejs版本1.x的路由器版本0.7

您需要将canReuse设置为false才能始终触发ready挂钩，因为正如文档所述，默认情况下，当重用视图时，它不会在后续使用时触发。

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

canReuse文档具有更多详细信息。 此设置在较新的版本中不再可用。

Answer 2

经过长时间的尝试，我发现很难触发ready()函数。

但是我们可以将重定向更改为方法而不是v-link：

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

然后在方法中手动调用reload()函数：

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