Vue Routerで表示内容を切り替えたとき、開いているメニューを閉じる方法

Vue & Vue RouterでSPAを作るとページ遷移が発生しないので、メニューなどで表示内容を切り替えるときにメニューが開きっぱなしになってしまう。

例

トップページを表示
メニューを開いて、「設定」をクリック
「設定」ページが表示される

※2. で開いたメニューが3. の時点でも開きっぱなしになる。

ルート変更(トップ → 設定、等)を検知し、メニューを閉じる処理を入れればOK。

HeaderComponent.vue


# 以下はHeaderComponent.vueにメニュー・開閉ボタン・開閉状態を示す変数を入れている前提の記述

<template>
  <header>
    // モーダルメニュー
    <div class="modal" v-if="is_menu_open === true" v-on:click.self="toggle_menu()">
      <nav class="menu">
        // 略
      </nav>
    </div>
  </header>
</template>


<script>
  export default {
    data: function() {
      return {
        is_menu_open: false // メニューの開閉状態を示す
      }
    },
    methods: {
      toggle_menu: function() {
        this.is_menu_open = !this.is_menu_open // メニュー開閉のために状態を変更
      }
    },
    watch: {
      $route(to, from) { // ルート変更を監視
        this.is_menu_open = false; // ルート変更時、メニューを閉じる
      }
    }
  }
</script>

# 以下はHeaderComponent.vueにメニュー・開閉ボタン・開閉状態を示す変数を入れている前提の記述

// モーダルメニュー

// 略

</nav>

</div>

</header>

</template>

export default {

data: function() {

return {

is_menu_open: false // メニューの開閉状態を示す

}

methods: {

toggle_menu: function() {

this.is_menu_open = !this.is_menu_open // メニュー開閉のために状態を変更

}

watch: {

$route(to, from) { // ルート変更を監視

this.is_menu_open = false; // ルート変更時、メニューを閉じる

}

</script>

パラメーター変更の検知 : Vue Router

https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル