【Vue.js】Vue Routerの書き方、使い方について解説

Vueを用いることでSPA(Single Page Application)を構築できます。SPAを構築する中でアプリ内でのページ遷移が必要になることがあると思います。これを実装するための公式のプラグインがVue Routerです。本記事ではVue Routerのインストールから実践的利用方法まで解説します。

Vue Routerとは？

Vue Routerとはwebページのルーティングを実装してくれる公式のプラグインです。ユーザーが入力したパスに対してどのようなページ(コンポーネント)を渡すのかをVue Routerによって定義できます。また、ページバックなどに対応するなどのオプションも提供しています。

Vue Routerのインストール

実際にVue Routerを利用するにはvue-routerを開発環境にインストールする必要があります。本記事ではVue-CLI環境へのインストールとCDNでのインストールを紹介します。

Vue-CLIへのインストール

Vue-CLIへは次のコマンドを入力するだけで、vue-routerをインストールできます。

$ npm install vue-router

インストール後、package.jsonファイルにvue-rouerの記載があればインストール完了となります。

(package.json)

"dependencies": {
  "core-js": "^3.4.4",
  "vue": "^2.6.10",
  "vue-router": "^3.1.5"
},

CDNでのインストール

CDNへのインストールは次のスクリプトを埋め込むだけです。

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

必ずVueを読み込んだ後に埋め込むようにしましょう。

Vue Routerの使い方

インストールした後もVue Routerが使えるようにするためにはいくつかの準備が必要です。こちらについてもVue-CLIとCDNで少し異なるので、それぞれ説明します。どちらの環境でも次のような簡易アプリを作ります。

Vue Routerの準備(Vue-CLI)

Vue-CLIの環境ではルーティングの管理をするroute.jsを作るのが一般的です。まずはroute.jsをsrcフォルダ内部に準備し、VueとVue Routerを使えるようにしましょう。

(route.js)

import Vue from 'vue'
import VueRouter from "vue-router"

Vue.use(VueRouter)

Vue.use(VueRouter)でVue Routerが使えるようになります。

ここからルーティングを定義するrouteを作り、さらにVue Routerに関する内容をrouterとしてエクスポートしましょう。

(route.js)

import Vue from 'vue'
import VueRouter from "vue-router"
import Page_1 from "./components/Page_1.vue"
import Page_2 from "./components/Page_2.vue"

Vue.use(VueRouter)

const routes = [
    { path: '/page1', component: Page_1 },
    { path: '/page2', component: Page_2 }
]

const router = new VueRouter({
    routes: routes
})

export default router

routesには/page1というパスに対してはPage_1のコンポーネントを渡し、/page2というパスに対してはPage_2を渡して表示させるようにしています。Page_1、Page_2はそれぞれコンポーネントであるため、あらかじめ、インポートしておきます。ちなみに、Page_1は次のような内容です。

(Page_1.vue)

<template>
  <div>ページ1</div>
</template>

そして、main.js内部のVueインスタンス生成時に、routerを用いるオプションを適用させるため、router.jsでエクスポートしたrouterをインポートしてオプションに加えましょう。

(main.js)

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

Vue.config.productionTip = false

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

この際に注意しなくてはいけない点は、router.jsでエクスポートしたrouterを必ずrotuerという名前でインポートしなければならない点です。

＊Routerなどの名前で行うと正常にコンパイルができません、次のようなエラーが発生します。

(Google Chrome Console)

[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

最後に、App.vueにそれぞれのパスへのリンクのボタン(router-link)とrouter.js内のrouteで定義したコンポーネントを表示させる機能を実装します

(App.vue)

<template>
  <div>
    <h3>Vue Router 入門</h3>
    <router-link to="/page1">ページ１へ</router-link>
    <router-link to="/page2">ページ２へ</router-link>
    <router-view></router-view>
  </div>
</template>

router-link内にそれぞれのパスをto属性で宣言し、router-viewでコンポーネントを表示させる位置を指定します。これで、次のような簡易的なアプリができます。パスも変更されています。

Vue Routerの準備(CDN)

index.htmlとapp.jsを用意します。まずはapp.jsから編集しましょう。ページ１とページ２をそれぞれローカルコンポーネントとして用意し、ルーティングを設定します。

(app.js)

const Page_1 = { template: '<div>ページ１</div>' }
const Page_2 = { template: '<div>ページ２</div>' }

const routes = [
    { path: '/page1', component: Page_1 },
    { path: '/page2', component: Page_2 }
]

routesには/page1というパスに対してはPage_1のコンポーネントを渡し、/page2というパスに対してはPage_2を渡して表示させるようにしています。

次に、Vueインスタンス生成時に、routerを用いるオプションを適用させましょう。new VueRouterでのインスタンスをrouterに格納してVueインスタンス生成時にrouterを加えます。

(app.js)

const Page_1 = { template: '<div>ページ１</div>' }
const Page_2 = { template: '<div>ページ２</div>' }

const routes = [
    { path: '/page1', component: Page_1 },
    { path: '/page2', component: Page_2 }
]

const router = new VueRouter({
    routes: routes  
})

new Vue({
    el: "#app",
    router
})

この際に注意しなくてはいけない点は、routerという名前でオプションに加えないといけない点です。

＊Routerなどの名前で行うと正常にコンパイルができません、次のようなエラーが発生します。

(Google Chrome Console)

[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

最後に、index.htmlにそれぞれのパスへのリンクのボタン(router-link)とapp.js内のrouteで定義したコンポーネントを表示させる機能を実装します。

(index.html)

<body>
    <div id="app">
        <h1>My Page</h1>
        <p>
            <router-link to="/page1">ページ1を見る</router-link>
            <router-link to="/page2">ページ2を見る</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script src="./app.js"></script>
</body>

id="app"内部にrouter-linkを記述し、to属性で遷移させたいパスを記述します。さらに、router-viewでコンポーネントを表示させたい位置を指定します。これで、次のような簡易的なアプリができます。パスも変更されています。

404エラー用のページを用意する

用意していないパスに対するアクセスがあった際に、404エラーを通知してみましょう。Vue Routerではアスタリスクを用いることで全てのパスに対してキャッチし、用意された404エラー用のコンポーネントを表示させることができます。次のコードのように指定します。CDNでVueをインストールした場合を想定しています。（Vue-CLIで利用している場合もroutes内部の記述は変わりませんので参考にしてください。）

(app.js)

const Page_1 = { template: '<div>ページ１</div>' }
const Page_2 = { template: '<div>ページ２</div>' }
const NotFound = { template: '<div>このページは存在しません</div>' }

const routes = [
    { path: '/page1', component: Page_1 },
    { path: '/page2', component: Page_2 },
    { path: '*', component: NotFound },
]

const router = new VueRouter({
    routes: routes // 
})

new Vue({
    el: "#app",
    router
})

NotFoundのページを要したことで、要していないパスをリクエストされた際に次のような振る舞いをさせることができます。

この記事のまとめ

本記事ではVue Routerを、実際の実装例を元に説明しました！

最後に記事の要点をまとめてみましょう。
VueとVue Routerを活用することで、簡単にルーティングが実装できる。
パスとコンポーネントをセットにしたroutesを定義し、routesなどのオプションをVueRouterでインスタンス化したrouterにし、Vueインスタンシス生成時にオプションとしてrouterを宣言することで実装できる。
404エラーに対するルーティングはアスタリスクを用いる。

Vue Routerを是非活用してみましょう！