【Vue.js】Vue Routerを使う手順

はじめに

今回はVue Routerを実際に使ってみる記事になります！

細かい説明というよりは、実際に使うときの実装の手順を書いていけたらと思います。

• はじめに
• VueRouterとは？
• 導入
• 準備
• 実装①「コンポーネントの作成」
• 実装②「ルーティングの設定」
• 実装③「<router-view>の実装」
• 実装④「<router-link>を用いてページ遷移させる」
• さいごに

VueRouterとは？

Vue Routerは、シングルページアプリケーションを構築するためのVue.jsの拡張ライブラリです。

Vue Routerを導入してできること（コンポーネント）はこの二つ。

今回作成するイメージとしてはこんな感じ。

導入

Vue cliを使うと入れるか聞かれたりしますが、自分でインストールするにはこのコマンドを打ち込みます。

$ npm install vue-router

今回は以下のコマンドにて作成した雛形を例にいくので、自動で入れてくれます。

$ vue init webpack test

準備

先程のコマンドにてプロジェクトを作成した場合、src/main.jsにこのように表記されているはずです。

import Vue from 'vue'
import App from './App'
import router from './router'   // 「src/router/index.js」(ルーターの設定ファイル)を読み込む

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,                       // アプリケーションに登録する
  components: { App },
  template: '<App/>'
})

ここで注目してほしいところはコメントが書いてあるところで、これによってVue Routerの利用をすることができるようになります。

またルーターの設定ファイルであるsrc/router/index.jsを見てみてください。

import Vue from 'vue'
import Router from 'vue-router'

//ルート用のコンポーネントを読み込む
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)     // 最初にプラグインとして登録

// VueRouterのインスタンスを生成，エクスポートする
export default new Router({
  routes: [
    {
      path: '/',                // ルートのパス
      name: 'HelloWorld',       // ルートの名前
      component: HelloWorld     // コンポーネントをパスとマッピングする
    }
  ]
})

ここでルーターの設定を行っていますが、今回一番重要なところは、

import HelloWorld from '@/components/HelloWorld'

{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
}

この二つのところですね。これはあらかじめVue cliが作成してくれているVue Routerの実装例なので、これからここをいじっていくということを頭の片隅に置いておくと良いと思います。

実装①「コンポーネントの作成」

<router-view>により描画するコンポーネントを作成しましょう。

ここは普通にコンポーネントを作るのと同じなので、src/componentsの中にtest1.vue，test2.vueを作成してみます。

・src/components/test1.vue

<template>
    <h1>test1</h1>
</template>

・src/components/test2.vue

<template>
    <h1>test2</h1>
</template>

実装②「ルーティングの設定」

次に先程作成したコンポーネントをどのパスのときに描画するかを設定します。

その設定はsrc/router/index.jsにてします。

import Vue from 'vue'
import Router from 'vue-router'

//ルート用のコンポーネントを読み込む
import HelloWorld from '@/components/HelloWorld'
import test1 from '@/components/test1'
import test2 from '@/components/test2'

Vue.use(Router)     // 最初にプラグインとして登録

// VueRouterのインスタンスを生成，エクスポートする
export default new Router({
  routes: [
    {
      path: '/',                // ルートのパス
      name: 'HelloWorld',       // ルートの名前
      component: HelloWorld     // コンポーネントをパスとマッピングする
    },
    {
      path: '/test1',
      name: 'test1',
      component: test1
    },
    {
      path: '/test2',
      name: 'test2',
      component: test2
    }
  ]
})

実装③「<router-view>の実装」

ルート定義で書いたコンポーネントを実際に反映させましょう。それには<router-view>を用います。

・src/App.vue

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

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

これは実際に確認した方が良いと思うので、以下のコマンドによりブラウザで見てみましょう。

& npm run dev

実装④「<router-link>を用いてページ遷移させる」

ページの遷移をするときは<a href="">を用いるのではなく、<router-link to="">を用います。

これは少し独特なところですよね。実際に使ってみるとこんな感じ。

・src/App.vue

<template>
  <div id="app">
    <router-link to="/">/#/</router-link>
    <router-link to="/test1">/#/test1</router-link>
    <router-link to="/test2">/#/test2</router-link>
    <router-view/>
  </div>
</template>

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

さいごに

一通りの基礎的な使い方はこれでOKだと思います。

最近はWeb熱が高まってきているので、もう少しだけVue.js関連を書くかもしれません。良かったらお付き合いください。