2019-07-29から1日間の記事一覧

【Vue Router】APIを使用して動的なSPAを作成する

第一回 【Vue Router】Vue Routerを使って2つのコンポーネントを画面遷移なしで切り替えたい - Laravelとねころっけくん5.8第二回 【Vue Router】URLのパラメーターから個別ページに移動したい - Laravelとねころっけくん5.8 今回はあらかじめ用意しておいた…

【Vue Router】URLのパラメーターから個別ページに移動したい

以前の記事をベースに、今回はURLのidパラメータによってページの表示が切り替わる仕組みを作成していきます。商品一覧ページから商品詳細ページなどへ飛ぶ際に便利かと思います。 router.jsへの追記 src/views/ProductList.vueの作成 src/views/Product.vue…

【Vue Router】アクティブなrouter-linkだけをハイライトしたい

このような形でアクティブなrouter-linkだけをハイライトしたい場合は、router-link-activeクラスを利用します。 router-link-activeとは router-link-activeは、選択されたアクティブなRouter linkタグに自動付与されるclass名です。内で以下のように指定し…

【Vue Router】Vue Routerを使って2つのコンポーネントを画面遷移なしで切り替えたい

こちらの記事の手順を参考にして、まずはVuexとVue Routerをインストールします。 該当ディレクトリ・ファイルの作成 src/views/Home.vue src/views/Product.vue src/router.js main.jsにrouter.jsを登録 App.vueにVue Routerを描画 URLに#が付く まとめ 参…