Vue Router利用のための最低限の実装

Vue Routerをとりあえず導入して、最低限の動きを見るまでの手順メモです。

Vue Routerはシンプルに使うことができて大変便利ですが、
本当はもっと複雑な設定もできる奥深いプラグインみたいです。

Vue Routerとは

• Vue.jsの公式プラグイン
• SPAを構築するためのルーティングライブラリ

クライアントの履歴管理を含めたページ遷移（＝ルーティング管理）やデータ取得・描画の機能を担ってくれます。
（何を言っているのかよくわかっていません）

Vue Router 導入

既存のプロジェクトにインストールします。

npm install vue-router

※ 新規プロジェクトの場合、vue createの際にvue-routerも併せて導入できるようです。

Vue Routerの設定

srcフォルダ配下に「router.js」という新規JSファイルを作成し、Vue Routerの設定を書いていきます。
main.jsに書いても問題ないですが、なるべく疎にしておきます。

router.js

//import
import Vue from 'vue';
import router from 'vue-router';

//1.component読み込み
import top from "./components/top"
import end from "./components/end"

//vue-routerをインストール
Vue.use(router);

//2.routerの設定とインスタンス生成
export default new router({
  routes:[
    {
      path: "/", //トップページ
      component:top
      },
      
      {
      path: "/end", //終点ページ
      component:end
      }  
  ]
});

1.component読み込み

routerで表示を制御したいコンポーネントをimportしておきます。
参考までに、topとendの中身はこんな感じです。

top.vue

<template>
  <div id="app">
    トップ
  </div>
</template>

end.vue

<template>
  <div id="app">
    終点
  </div>
</template>

2.routerの設定とインスタンス生成

他にも様々な設定が可能ですが、今回はroutesのみ設定します。
ここでURLとコンポーネントの組み合わせを定義できます。

今回の例だと、URLが
"~xxx/"のときはtopコンポーネントが描画され、
"~xxx/end"のときはendコンポーネントが描画されます。

main.jsで読み込む

上記で作成したrouter.jsをmain.jsで読み込みます。

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

以上でRouterの設定は完了です。

親コンポーネント側の設定

あとはこれを受けるための要素を親コンポーネント側で用意します。

今回は「App.vue」の特定の部分にtopコンポーネントとendコンポーネントを出し分けしたいので、
App.vueの中にrouter-view要素を書いておきます

以下の<router-view></router-view>の部分に、routesで設定したコンポーネントが描画されます。

App.vue

<template>
  <div id="app">

    <router-link to="/">トップページ</router-link><br>
    <router-link to="/end">終点ページ</router-link>
    <!--↑Routerのリンク（ページ遷移）を定義-->

    <router-view></router-view>
    <!--↑ここにRouterで設定したコンポーネントが描画される -->

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router-viewだけだとアドレスバー直打ちで遷移する羽目になるので、
<router-link to="xxx">でリンクを表示して、ページ遷移できるようにしています。

動かす

localhostで動かしてみます。

初期表示

「終点ページ」押下

「終点ページ」押下後、「トップページ」押下

※routerの設定でmodeをhistoryにすると、URLの#が消えていい感じになるようです。

参考

• [Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する
• [【Vue.js】vue-routerの基礎をサンプルを用いて解説]
  (https://b1tblog.com/2019/10/03/vue-router/)
• 『Vue.js入門 基礎から実践アプリケーション開発まで』/技術評論社