Vuejs：ルート変更時のイベント

Question

私のメインページでは、@click = "show=!show"のリンクをクリックしてv-show=showを表示し、ルートを変更するときはshow=falseと設定したいと思っています。このことを実現する方法を教えてください。

Answer 1

セットアップ、このようなコンポーネントで$routeのウォッチャーは：

watch:{ 
    $route (to, from){ 
     this.show = false; 
    } 
} 

これは、ルートの変更を監視し、変更されたとき、そこであなたはバージョン2.2.0を使用している場合はfalseを

Answer 2

にshowを設定し、 $ルートの変更を検出するためのもう1つのオプションがあります。同じコンポーネント内のparamsの変化に反応するように

、あなたは、単に$ルートオブジェクト見ることができます：

const User = { 
    template: '...', 
    watch: { 
    '$route' (to, from) { 
     // react to route changes... 
    } 
    } 
} 

あるいは、2.2で導入されたbeforeRouteUpdateガードを使用する：

const User = { 
    template: '...', 
    beforeRouteUpdate (to, from, next) { 
    // react to route changes... 
    // don't forget to call next() 
    } 
} 

リファレンス：https://router.vuejs.org/en/essentials/dynamic-matching.html