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