【Vue.js】Vue Routerを使う手順 - はなちるのマイノート

はじめに

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

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

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

VueRouterとは？

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

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

タグ	意味
`<router-view>`	ルートとマッチしたコンポーネントを描画する
`<router-link>`	ルートのリンクを作成する

今回作成するイメージとしてはこんな感じ。
f:id:hanaaaaaachiru:20191111125424p:plain

導入

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

f:id:hanaaaaaachiru:20191111141323p:plain

実装④「<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>