Vue & Vue RouterでSPAを作るとページ遷移が発生しないので、メニューなどで表示内容を切り替えるときにメニューが開きっぱなしになってしまう。
例
- トップページを表示
- メニューを開いて、「設定」をクリック
- 「設定」ページが表示される
※2. で開いたメニューが3. の時点でも開きっぱなしになる。
ルート変更(トップ → 設定、等)を検知し、メニューを閉じる処理を入れればOK。
HeaderComponent.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
# 以下は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> |
パラメーター変更の検知 : Vue Router
コメントを残す