Vue Router を使ってみました

最近Vue.jsを勉強し始めたのですが、vue-router というライブラリを知ったので、勉強のために試してみました。

＊Vue Router とは

シングルページアプリケーション（SPA）を作成するためのルーティング機能をサポートするVue.jsの拡張ライブラリです。
URLとコンポーネントを紐づけることで実現しています。

＊参考

＊環境

MacOS
vue 2.9.6

＊Vueアプリケーションの環境構築

Vue-cliを使って最小構成のVueアプリケーションのプロジェクトを作成します。

適当にディレクトリを作成し、下記コマンドを実行します。
vue init の質問には全てデフォルトのままEnterで大丈夫です。

$ sudo npm i -g vue-cli
$ vue init webpack-simple vue-app
? Project name vue-app
? Project description A Vue.js project
? Author XXXXXXX <XXXXXXX@gmail.com>
? License MIT
? Use sass? No

下記の構成でプロジェクトが作成されます。

.
└── vue-app
    ├── README.md
    ├── index.html
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    └── webpack.config.js

作成されたプロジェクトフォルダに入り、npmコマンドで node_modules をインストールします。
node_modules のフォルダが作成されます。

$ cd vue-app/
$ npm i

Vueアプリケーションを起動すると初期画面が表示されます。

$ npm run dev

＊Vue Routerの設定

vue router をインストールします。

$ npm i -S vue-router

main.jsにrouterを使う設定を追加します。
<src/main.js>

import Vue from 'vue'
import VueRouter from 'vue-router'  <-- 追加
import App from './App.vue'
import { routes } from './routes'   <-- 追加

Vue.use(VueRouter)                  <-- 追加

// ↓追加
const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,           <-- 追加
  render: h => h(App)
})

ルーティング情報を設定するroutes.js を新規作成します。
パスと読み込むファイルを紐づけています。
<src/routes.js>

import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

export const routes = [
  { path: '/a', component: A },
  { path: '/b', component: B },
  { path: '/c', component: C },
]

componentsディレクトリを作成し、読み込むためのファイルを新規作成します。
<src/components/A.vue>

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'A',
  data() {
    return {
      msg: 'Hello A!!',
    };
  },
};
</script>

<src/components/B.vue>

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: 'Hello B..!',
    };
  },
};
</script>

<src/components/C.vue>

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'C',
  data() {
    return {
      msg: 'Hello C...',
    };
  },
};
</script>

App.vueを書き換えて、新しいメッセージを画面に出力させるようにします。
router-viewタグの部分にURLと紐づけたコンポーネントの内容が出力されるようになります。
<src/App.vue>

<template>
  <div id="app">
    <div class="header">=== header ===</div>
    <router-view></router-view>
    <div class="footer">=== footer ===</div>
  </div>
</template>

<style>
#app {
  text-align: center;
  font-size: 40px;
}
.header {
  height: 50px;
  background-color: #ebebeb;
  margin-bottom: 50px;
}
.footer {
  height: 50px;
  background-color: #ebebeb;
  margin-top: 70px;
}
</style>

Vueアプリケーションを起動します。