Vue Routerを使ってみる

Vue.jsでのSPA構築の際、ルーティングの管理をするための公式プラグイン「Vue Router」を使ってみます。

設定方法

Vue Routerのインストール方法はいくつかありますが、今回はCDNを利用します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>

まずはHTML側の設定です。
ページ遷移にrouter-linkを使用し、リンク先はtoプロパティに指定します。
router-view部分にルートとマッチしたコンポーネントが表示されます。

<div id="app">
  <nav>
    <router-link to="/">HOME</router-link>
    <router-link to="/about">ABOUT</router-link>
  </nav>
  <router-view></router-view>
</div>

次にJavaScript側の設定です。

// ルートコンポーネントの用意
var Home = { template: '<div>Home</div>' }
var About = { template: '<div>About</div>' }

// ルーターインスタンスを作成
var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }, {
      path: '/about',
      component: About
    }
  ]
});

// rootになるVueインスタンスにルーターインスタンスを渡す
var app = new Vue({
  router
}).$mount('#app')

コメントに書いている通りですが、ルーターインスタンスを作成後、それをVueインスタンスに渡して使用します。
ルーターインスタンスではルートのパスと使用するコンポーネントをそれぞれ設定します。

実際にデモを確認すると、ページの切り替わりが確認できます。
Vue Router使用のデモページ

動的なページも設定できます。
例えば、「/user/ユーザーID/」のようなURLで、ユーザーID部分をページ内で使用したい場合は以下のように設定します。

// ルートコンポーネントの用意
var Home = { template: '<div>Home</div>' }
var About = { template: '<div>About</div>' }
var User = { template: '<div>User {{ $route.params.id }}</div>' }

// ルーターインスタンスを作成
var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }, {
      path: '/about',
      component: About
    }, {
      path: '/user/:id',
      component: User
    }
  ]
});

// rootになるVueインスタンスにルーターインスタンスを渡す
var app = new Vue({
  router
}).$mount('#app')

ルートの設定は16行目で、「:id」のようにコロンを使うことで実装できます。
このパラメータは「$route.params.id」のようにして使用することができ、4行目のコンポーネント内で使用しています。
動的なページのデモページ

pathの指定に「*」を指定することで、全てにマッチすることができます。
例えば設定しているルート以外のURLにアクセスした際、404ページを出すようにしてみます。

// ルートコンポーネントの用意
var Home = { template: '<div>Home</div>' }
var About = { template: '<div>About</div>' }
var Error = { template: '<div>404 {{ $route.params.pathMatch }} というページは見つかりませんでした。</div>' }

// ルーターインスタンスを作成
var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }, {
      path: '/about',
      component: About
    }, {
      path: '*',
      component: Error
    }
  ]
});

// rootになるVueインスタンスにルーターインスタンスを渡す
var app = new Vue({
  router
}).$mount('#app')

「$route.params.pathMatch」でアクセスしたパスを取得できます。
「*」を使用する際は、そのルート指定が一番最後にくるように注意してください。
404ページのデモページ

redirectでリダイレクト、aliasでエイリアスの設定ができます。

// ルートコンポーネントの用意
var Home = { template: '<div>Home</div>' }
var About = { template: '<div>About</div>' }

// ルーターインスタンスを作成
var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }, {
      path: '/about',
      component: About,
      alias: '/alias'
    }, {
      path: '/redirect',
      redirect: '/about'
    }
  ]
});

// rootになるVueインスタンスにルーターインスタンスを渡す
var app = new Vue({
  router
}).$mount('#app')

redirectの場合はURLを含めて/aboutヘリダイレクト、aliasの場合はURLは/aliasのまま/aboutのページを表示するようになります。
redirectのデモページ(/aboutにリダイレクトします)
aliasのデモページ