【入門編】Webpack（Vue.js）環境で画面遷移する方法

　前回、Webpackで構築したVue-cli環境でHelloWorldを編集する記事（下記関連記事）を紹介しましたが、今回は実際に新規にコンポーネントを作成し画面遷移までしてみたいと思います。

環境

　なお、今回の環境も前回に引き続き以下の通りとなります。

　なお、本記事は前回の内容を踏襲して、追記していくかたちになるので前回の内容も簡単に目を通しておいてもらえるとわかりやすいかと思います。

新規にコンポーネントを作成する

　では、まずは新規にコンポーネントを作成していきたいと思います。

　現状、「/sample/src/components/」ディレクトリにはHome.vueというファイルのみ存在している状態ですが、このHome.vueファイルをコピペして新規にコンポーネントを作成していきます。

　コピペしたら、ファイル名を作成したい画面の名称に変更します。今回はAbout画面を想定して「About.vue」という名称にしたいと思います。

　また、2つだけでは寂しいので、再度コピペしてもう１つコンポーネントを作成します。もう１つの名称はとりあえず「Sample.vue」というファイル名にしておきます。

　これで、componentsディレクトリ内に下記3つのフィアルが存在している状態になると思います。

作成したコンポーネントを編集する

　続いて、新規に作成コンポーネントファイルをそれぞれ下記のように編集していきます。

About.vue

　それぞれHome.vueファイルの内容を名称に沿って変更した感じです。

ルーティングの設定

　コンポーネントファイルを新規に作成したら、続いてルーティングの設定をしていきます。ルーティングは前回説明したように「/sample/src/router/index.js」ファイルで設定します。

　今回は「About」と「Sample」というコンポーネントを作成したので下記のように編集します。

　一応追記した部分は分かるようにコメントアウトで記載していますが、4行目と5行目、それから16〜25行目が追記した箇所になります。

開発環境を起動して画面の確認

　ルーティングの設定までしたら、下記コマンドで一旦開発環境（http://localhost:8080）を起動して画面の確認をします。

About画面

　About画面は「/about」というパスでルーティング設定をしたので、「http://localhost:8080/#/about」にアクセスすることで表示されると思います。

Sample画面

　Sample画面も同様なので、「http://localhost:8080/#/sample」にアクセスすることで表示されると思います。

App.vueを編集して遷移遷移

　それぞれ問題なく表示されていることを確認したら、「/sample/src/App.vue」ファイルを編集してボタンを設置して画面遷移できるように実装していきます。

そもそもApp.vueはどんなファイルなのか？

　まず、現状（デフォルト）のApp.vueファイルを見ていきましょう。

　デフォルトでは、このような感じになっています。

　そもそも、このApp.vueファイルはどのような役割を果たしているかと言うと、ルートファイルのような役割になります。つまり全画面共通で使うテンプレート（ヘッダーやフッター等）の類はこのファイルに記述したり、jsやcssに関しても全体で共有したいものに関してはこのファイルに記述していくかたちになります。

　現在、「Home」と「About」、「Sample」というコンポーネントを作成している状態ですが、それぞれにVue.jsのロゴが表示されていると思います。このロゴ画像はこのApp.vueの3行目にあるimgタグの部分になります。このことからもルートのような役割を果たしていることが分かるかと思います。

　そして、4行目に「」というタグがあると思うのですが、この部分が各コンポーネントを呼び出す働きをする部分になります。

router-linkでリンクを設置

　簡単にApp.vueがどのようなファイルなのか分かったところで、実際にリンクボタンを設置していきます。

　リンクは「router-link」というコンポーネントを使って設置します。aタグでももちろん作成することは可能ですが、公式のリファレンスにも記載されている通り管理する上「router-link」のほうが好ましいので特別なことがない限り「router-link」で設置しましょう。

　今回は適当に各コンテンツが読み込まれる「」の下にリストスタイルで下記のように設置してみます。

　こんな感じですね。6〜8行目にそれぞれリンクボタンを設置しました。

　この状態で、「http://localhost:8080/#/」にアクセスしてみると下図のような感じになっていると思います。

　設置したボタンが表示されていますね。このリンクボタンをクリックすればそれぞれのコンテンツが表示され、URLもそれに応じて変わることが確認できるかと思います。

まとめ

　ということで、今回はWebpack（Vue.js）環境で基本的には画面遷移を構築する方法を紹介させていただきました。Vue.jsだとこのように画面遷移もとても簡単に構築することができます。

　てことで、今回はここまで！また！