Vue.js：ルート変更のパラメータのみの場合、コンポーネントの準備ができていません

Question

vue.js 1.0をvue-routerで使用しています。私はHome.vueコンポーネントから/user/adminに切り替えると、UserList.vueのready()機能をだから

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

：私があることルータ項目を設定した

<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成分UserList.vueを有しますトリガーされます。

ただし、/user/adminと/user/normalの間で切り替えると、ready()機能は起動されません。

しかし、データをロードしたいのですが、安定した方法でready()機能を起動させる方法はありますか？

Answer 1

この答えは、ルータのバージョンに適用されます0.7 with Vuejsバージョン1.x

canReuse〜falseを設定して、常にをトリガーする必要がありますフックは、ドキュメンテーションが示すように、デフォルトの設定であるビューが再利用されたときにそれ以降の使用でトリガされないためです。

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