18.nuxt.jsとbulmaでハンバーガーメニュー:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [Vuexストアを設定する] adash333 | 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [ソースコード] adash333 | ||
---|---|---|---|
行 22: | 行 22: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
- | + | スクリーンショット | |
- | + | {{: | |
- | Demo | + | |
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 165: | 行 165: | ||
*このときに、Vuexを用いると、コンポーネント間の" | *このときに、Vuexを用いると、コンポーネント間の" | ||
- | 詳細はhttps:// | + | 詳細はhttps:// |
+ | *isMenuActiveの状態管理に、Vuexを使った方がよい | ||
+ | *Nuxt.jsアプリでは、< | ||
===== Vuexストアを設定する ===== | ===== Vuexストアを設定する ===== | ||
行 208: | 行 210: | ||
{{: | {{: | ||
+ | ===== ページ遷移したときにトグルが閉じるようにする ===== | ||
+ | |||
+ | ページ遷移したとき、すなわち、新しいページが描画されてfetch()メソッドを呼び出されたときにトグルが閉じるように(isMenuActiveがfalseになるように)します。 | ||
+ | 具体的には、各pages/ | ||
+ | < | ||
+ | < | ||
+ | export default { | ||
+ | fetch({ store }) { | ||
+ | store.commit(" | ||
+ | } | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | pages/ | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{: | ||
+ | 今回は以上となります。 | ||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | https:// | ||
+ | スクリーンショット | ||
+ | {{: | ||
+ | ===== 今回写経させていただいたサイト ===== | ||
+ | https:// | ||
+ | {{: | ||
18.nuxt.jsとbulmaでハンバーガーメニュー/index.html.txt · 最終更新: 2019/02/09 by adash333