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

试了很久，发现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}});
    }
  }
}

Answer 2

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

您需要将 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 documentation 有更多详细信息。此设置在较新版本中不再可用。

Vue.js: 仅路由参数变化时无法触发组件就绪

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

javascript

mvvm

ecmascript-6

vue.js

vue-router