生田望 (LINE株式会社) 「UIT meetup vol.10 『Vue 三昧』」での発表資料です https://uit.connpass.com/event/187267/
本文書ではvue-cliコマンドを利用して作成したvueプロジェクトでのVue Routerの設定手順について説明を行なっています。最新のvue-cliのバージョンを利用するとVueのバージョンを選択することができます。本文書では最新バージョンのVue CLI v4.5.11で動作確認を行っているためVue2, Vue3の両方で動作確認を行っています。 Vue 2, Vue 3の両方の環境を使って説明を行っていますが本文書内でのバージョン間の違いはVueとRouterのインスタンス化に関するコードが記述されているmain.jsとrouter/index.jsファイルの2つとコンポーネントのroot要素が必ず1つという制限がVue 3からなくなったことです。Vue Routerのルーティングの設定については違いはありません。 Vue Routerを利用することでページを移動する際にページの再
vue-routerとは?vue-routerを用いることでURLにより表示するコンポーネントを制御することができます。Vue.jsでシングルページアプリケーションの構築する場合には必須といっていいほど利用されています。 vue-routerの基礎的な部分を以下のサンプルを用いて説明していきます。 vue-routerの導入方法インストール次のコマンドでインストールします。yarnを使っている場合は置き換えてください。 $npm install vue-routerrouter.js の作成srcディレクトリ内にrouter.jsファイルを以下のように作成し、Routerインスタンスを作成します。 詳細は後程説明します。 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export defau
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く