【Vue.js】Vue Routerを後から追加する方法

どうも。みずかず(@mizukazu_1)です。

今回はVue.jsでVue Routerを後から追加する方法を書いていきます。

プロジェクトを作成する際に対話形式でRouterの導入も出来るのですが、うっかり忘れてしまう事もあります。

そんな時に後から追加する方法を知っているとプロジェクトを作り直さなくて良いので大変便利です。

とは言ってもnpmでインストールしてルーティング用の設定ファイルを書くだけなのでそんなに難しくはありません。

npmでvue-routerをインストールする

下記のコマンドでvue-routerをインストールします。

npm install vue-router

これでプロジェクト内でRouterを使用できるようになります。

router.jsファイルを作成してルーティングの設定を書く

次にsrcフォルダの中にrouter.jsを作成します。

main.jsにルーティングを書いてもいいのですが別々にしておいた方がメンテナンスしやすいかと思います。

router.jsには下記のような設定を記載します。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import Test from './components/Test.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/test', component: Test }
  ]
})

こちらでVueとRouterをインポートします。
同時に使用するコンポーネントもインポートします。

ここではHomeとTestというコンポーネントです。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import Test from './components/Test.vue'

これはVueの中でRouterを使用するよという宣言になります。
これが無いと動かないので要注意です。

Vue.use(Router)

最後にRouterのインスタンスを作成します。
引数にRoutesというパラメータを渡しています。

このRoutesの中でURLの設定とそのURLに対応するコンポーネントを紐づけます。
もちろんidによって画面の内容を変えるような動的ルーティングも可能です。

export default new Router({

  routes: [
    { path: '/', component: Home },
    { path: '/test', component: Test }
  ]
})

router.jsに書く設定はこんな感じです。

main.jsでrouter.jsの内容をインポートする

srcの中にmain.jsがあるのでそちらを少し書き換えます。

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

Vue.config.productionTip = false

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

まず先ほど書いたrouter.jsの内容をインポートします。

import router from './router.js'

次にVueのインスタンスにrouterを渡してあげます。

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

これだけでOKです。

App.vueを修正する

最後にApp.vueを少し修正する必要があります。

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

App.vueに<router-view>というタグを挿入します。

これを入れる事で<router-view>の部分がURLに紐づけられたコンポーネントに切り替わります。

まとめ

npmでvue-routerをインストール
router.jsを作成してルーティングの設定を書く
main.jsでrouter.jsの内容を読み込む
App.vueに<router-view>タグを挿入する

この手順を覚えていればうっかりRouterをインストールし忘れても後から追加することが出来ます。

途中からページ遷移をさせる必要が出てきた場合にも対応できるのでオススメです！

Vueの概要について知りたい方は以下の記事も参考になると思います。

2019年2月25日 Vue.jsを使ってみたので分かりやすくまとめた

みずかず

最後まで読んでいただきありがとうございました！