はじめに

c-mappプロジェクトの3つ目の記事になります。今回は、Vue.jsによって作成しているフロントエンドにvue-routerを導入する手順についての内容になります。

なぜ追加するのか

そもそもなぜvue-routerを追加する必要があるのか？もっと言えば、vue-routerって何？どう変わるの？って話になると思います。

vue-routerとは、Vue.jsによって作成したフロント側をSPAとして構築する際に利用できるプラグインです。

SPAって何？って話ですが、別に週刊誌ではないです。

シングルページアプリケーションの略です。

ググってもらえば色々と出てきますが、簡単に説明すると、従来のWEBアプリケーション等では画面側を作成するときにhtmlファイル等をそれぞれ用意し、サーバ側に通信することでどのページを呼び出してくるのか指示を出し、それを受けてどのファイルを表示するのかを処理していました。

これに対し、SPAの場合は用意するhtmlファイルは一つだけになります。そしてそのファイル内に何を描写するのか、その指示や処理をフロントエンド側の処理で行うことによってサーバ側への通信負担軽減等を行うことが出来ます。

イマイチ私の説明だけだと要領を得ないかもしれませんが、以下のポイントだけ押さえてもらえば大丈夫です。

この辺の内容については、別記事で改めて解説したいと思います。

ということで、まずSPAとは何なのか、を簡単にそれっぽく理解していただけたと思います。

そして次に、vue-routerの役割についてです。

ルーティング処理を行うために必要なプラグインですが、そもそもルーティングとは？って話ですよね。

従来のWEBシステム等の場合とは異なり、SPAの場合は実際に画面遷移が行われているというよりは、描写内容を変えているというのがより近い表現になります。

そしてその場合、実際にサーバ側へリクエストを送信し、それの返しを受けているわけではないですが、擬似的にそれをできるようにしている、みたいな認識で良いと思います。（違ったらごめんなさい）

詳しく知りたい方はQiita等に記事がありますので、よかったら色々探してみてください。（本記事の最後に参照リンクを掲載しておきます）

前置きが長くなりましたが、一旦この記事ではこの辺で終わりにします。

次に、実際に導入してみましょう。

以下のコマンドをプロジェクトのルートディレクトリで実行してください。

vue add router

実行後、historyモードを利用するかy/nで聞かれます。今回はyを入力します。

入力後、処理が続きます。このとき、色々と新規でファイルが追加、作成されていきます。

App.vue等も勝手に書き換えられています。

とりあえずこれで一旦起動してみましょう。

画面上部に有る Home | About をクリックすることで画面遷移が可能になっています。

これでとりあえずvue-routerの導入は完了です。

vuetifyを導入していたため、ぐちゃぐちゃになっています。このへんの修正などを次回以降行っていきましょう。