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

因此，当我从/user/admin组件切换到Home.vue时，会触发ready()的{{1}}功能。

但是当我在UserList.vue和/user/admin之间切换时，/user/normal功能不会被触发。

但是我想加载数据，如何制作一个稳定的方法来触发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 documentation还有一些细节。此设置在较新版本中不再可用。

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

Vue.js：当只有一个路径参数改变时，不能触发组件的准备

2 个答案: