Vue Routerの導入と基本的な使い方

インストール

詳しくは公式サイトをどうぞ。

インストール | Vue router

今回は、npmでインストールして、vue cliでプロジェクトを作ったケースで見ていきます。

読み込み（import）

main.jsでインポートします。

import Vue from 'vue' # Vueをロード
import App from './App.vue' # メインのVueテンプレート
import router from './router' # routerの実行&ルート設定ファイル

Vue.config.productionTip = false

new Vue({
  router, # Vueインスタンスにrouterを追加
  render: h => h(App)
}).$mount('#app')

main.jsはこのままコピペで大丈夫です。

Routeを書く

続いて、router.jsにルートを書いていきます。

vue uiとかでインストールした場合は、サンプルルートがすでに書き込まれているはずです。

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

Vue.use(Router)

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

それぞれのコードの詳細を見ていきます。

import

router.jsでは、まずVueとVueRouterを読み込んでます。

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

読み込み元のmain.jsでもVue.jsを読み込んでますが、Vue Router側でも読み込みが必要です。

次に読み込んでいるのがViewコンポーネントです。

import Home from './views/Home.vue'
import Foo from './views/Foo.vue'

これで、Home.vue、Foo.vueは、それぞれHome、Fooという名前で読み出すことができます．

Aboutコンポーネントは、router側でimportする例となっています。

Vue Routerの登録

続いて、Vue Routerの登録をします。

Vue.use(Router)

これだけでOKです。

詳細なルート設定

最後に、ルートの詳細設定をします。

フォーマットは、

export default new Router({
  キー: バリュー,
})

です。

historyモード

SPAアプリとしてリリースする場合は、URLを意識しないといけないため、historyモードが必須です。

mode: 'history'

この設定をすると、URLが

example.com/#/about

ではなく、

example.com/about

と、ハッシュを覗いた通常のURLのような形になります。こうすることで、Google Botにもルーティングさせたページが認識されます。

Cordovaなどを使ったネイティブアプリにする場合は、この設定は必須ではありません。

ルーティング

続いて、個々のルーティングを書きます。

書き方は、「routes: 配列」が基本です。

routes: []

配列の中身は、jsonフォーマットの連想配列です。

routes: [
  {
    path: '/', #URLパス。ブラウザの表示URLになります
    name: 'home', #ルーティング名
    component: Home #読み込むコンポーネント名です
  },

componentの引数であるコンポーネント名は、先ほどのimportで読み込んだものだけが指定できます。新たに追加したい場合は、importを増やします。

component部分は、直接関数を書くこともできます。

component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

メインコンポーネントでルートを指定する

最後に、メインコンポーネントでルートを指定します。

今回は、App.vueというファイルが全体のフレームを統括するメインコンポーネントになっている前提とします。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/foo">Foo</router-link> |
    </div>
    <router-view/>
  </div>
</template>

ルートの書き方

<router-link to="/">Home</router-link>

という感じで、toの引数に普通にURL形式でかけばOKです。引数には、router.jsで指定したnameを書くこともできます。

<router-link to="Home">Home</router-link>

変数を与えることもできます。

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

引数の設定は、詳しくは公式ドキュメントをどうぞ。

API リファレンス | Vue Router

コンポーネントの描画

<router-view/>

でrouterで指定したコンポーネントを描画できます。

router-viewの中身は、router.jsで指定したコンポーネントが動的に切り替わるので、値を指定する必要はありませんが、引数で直接コンポーネントを指定することも出来ます。

<router-view name="helper"/>

名前付きビュー | Vue Router

今回の例では、App.vueにルーターリンクを書いているので、どのURLでも上部にリンクが表示されます。

サイトのグローバルリンクなどはこうした方式を取るのが良さそうですね。

Vue Routerの導入から基本的な使い方をみてきました。

パッと見ると「うわ、なんか設定がいっぱいあるな」と思いますが、分解してみていくと、かなりシンプルで柔軟な作りだとわかりますね。

ルーティングができると、ぐっとWebアプリ感が出てきて作るのが楽しくなるので、ぜひ使ってみてください。