ルートの前にメソッドを実行する

Question

私は.is-activeに設定して有効にするログインモードを持っています。このために、私はこのような方法を持っています：

methods: { 
    toggleModal: function (event) { 
     this.isActive = !this.isActive 
    } 
    } 

私はonclickを実行しています。ブール値isActiveに応じて、私のモーダルはクラス.is-activeになります。

事は、私のモーダルで、私はこのコードで、新しいコンポーネントをレンダリングしています意味新しいビューにユーザーを取るボタン持っている：

<router-link class="control" @click="toggleModal()" to="/register">

あなたが見ることができるように、それはルーティングです/registerにこれを行う前に、モーダルが閉じられるようにtoggleModal()を実行する必要があります。今は、メソッドを実行せずにルーティングしています。つまり、新しいビューにはモーダルオーバーレイがあり、最適ではありません。

Vueでこれを行う良い方法はありますか？最初にtoggleModal()を呼び出し、メソッドからルートを呼び出す方法を作成できますか？

ありがとうございました。

Answer 1

まず、toggleModalを呼び出してナビゲートするメソッドを定義します。これと同じように：あなたがイベントやイベントターゲットからより多くのデータをキャプチャする予定がない限り

methods: { 
    navigateAway() { 
    this.isActive = !this.isActive 
    this.$router.push('/register') 
    } 
} 

あなたはevent引数を必要としません。もしあなたが望むのであれば、ルータのプッシュをsetTimeoutにラップすることもできます。もちろん

methods: { 
    navigateAway() { 
    let vm = this 
    vm.isActive = !vm.isActive 
    setTimeout(function() { 
     vm.$router.push('/register') 
    }, 50) 
    } 
} 

---

、あなたはこれを簡単にvue-routerから使用することができますフックがあります。 VUEルータフックに

export default { 
    data() { 
    return { 
     isActive: false 
    } 
    }, 
    beforeRouteLeave (to, from, next) { 
    this.isActive = false // I assume that you would not want to leave it open upon navigating away 
    next() 
    } 
} 

リンク：https://router.vuejs.org/en/advanced/navigation-guards.html

例（単一ファイルコンポーネントとVue.js 2.xのを使用していると仮定）