ビルド済みのVue CLIにVue Routerを導入してみた

2020 4/07

2020.04.07 2020.04.07

Vue.jsについて学習したので、Vue Routerを導入してみようと思います。
非同期でバリバリページが遷移して欲しい・・・

目的

Vue.jsのアプリにVue Routerを導入する

（前提、環境）

mac
macOS Mojave 10.14.5
Homebrew 2.2.11
nodejs v 10.16.3

はじめに

前回の記事の続きです。

公式

参考記事

山田さん著書のこれから始めるVue.jsを参考にしております。
めちゃくちゃわかりやすかったです・・・・！

導入

Vue Routerのインストール

最初からカスタムビルドすればrouterも装備したままアプリを作成できたのですが、今回はすでにVue CLIを作成しているので後付けでRouterを作成していきます。

npmコマンドでインストール

npmを使ってインストールします。

# ターミナル
$ npm install vue-router

+ vue-router@3.1.6
added 1 package from 1 contributor and audited 25487 packages in 8.931s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

router.jsを作成

router.jsでルーティングを管理していきます。
ルーティングに関わるコンポーネントはviewsディレクトリの配下に格納。
細かな部品はcomponentsディレクトリに格納します。
※Homeは例としてのコンポーネントです。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home/'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

番外編historyモード

router.jsに

mode: 'history'

という記述がありますが、これはHistory APIを利用してブラウザの戻るボタンなどが使えるようにしているものです。
通常のブラウザであればHistory APIも対応しているはずなので、基本的にはhistoryモードで使います。

router.jsのプロパティ一覧

プロパティ名	説明
base	アプリの基底パス(/)
path	リクエストのパス
component	呼び出すコンポーネント(単体)
components	呼び出すコンポーネント(複数)
redirect	リダイレクト先のパス
chirdren	配下のルートの設定
props	ルートパラメーターの割り当て
alias	エイリアスの設定
meta	ルートのメタ情報
caseSentive	大文字小文字についての判別

使い方

ルーティングのパスの設定

上記を元に今回の例ではaboutパスを踏んだ時に別のページに飛ぶようにします。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: ()=> import('./views/About')
    }
  ]
})

main.jsでのRouterの有効化

import Vue from 'vue'
import App from './App.vue'
# routerの追記
import router from './router'

Vue.config.productionTip = false

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

router-linkタグ, router-viewタグ

routerの設定が完了したらルーティングで設定したコンポーネントをどのようにして呼び出すか定義していきます。
その際に使用されるのがrouter-linkタグです。
※通常のリンクの移動はaタグを用いるところ、特殊なタグを使っています。

router-viewタグはrouter-linkタグは実際に呼び出されたコンポーネントを表示させます。

書き方

書き方としては4通りあり、バインディングで指定したり、pathまたはnameプロパティで指定したりする方法があります。
下記が具体的な書き方です。

<router-link to="about">about</router-link>
<router-link v-bind:to="'/about'">about</router-link>
<router-link v-bind:to="{ path: '/about' }">about</router-link>
<router-link v-bind:to="{ name: 'about' }">about</router-link>

App.vueに追記

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-link to="/">Home</router-link>
    <router-link to="about">About</router-link>
    <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

番外編 $router.pushメソッド

router-linkタグだとクリックしなければコンポーネントを呼び出すことができません。
しかし、スクリプトでページを丸ごと遷移させるために$router.pushメソッドを用いることで可能となります。

具体的な書き方

具体的にトップへとクリックしたらルートページに戻るようなメソッドを作ります。

# src/views/About.vue
<template>
  <div class="about">
    <p>Home</p>
    <button v-on:click="onclick">トップへ</button>
  </div>
</template>
<script>
  export default{
    methods: {
      onclick(){
        this.$router.push('/')
      }
    }
  }
</script>