【Vue.js】Vue Routerについての理解を整理してみた

はじめに

Vue.jsの勉強を進めていくと「Vue Router」というものに出会いました。

今回はそのVue Routerについて得た基本的な知識と理解を
備忘録も兼ねて書き記していきます。

Vue Routerとは

Vue RouterはVue.jsの公式プラグインとして提供されているSPA構築のためのルーティングライブラリです。

ちなみにSPAとは「シングルページアプリケーション」の略称で、
1つのHTMLを読み込んだ後はAjaxで情報を取得し、動的にページを更新するWebアプリケーションを指しています。

公式ドキュメントでは、
Vue Routerの機能として以下の8点が紹介されています。

・ネストされたルート/ビューマッピング
・モジュール式、コンポーネントベースのルータ構造
・ルートパラメータ、クエリ、ワイルドカード
・Vue.js の transition 機能による、transition エフェクトの表示
・細かいナビゲーションコントロール
・自動で付与される active CSS クラス
・HTML5 history モードまたは hash モードと IE9 の互換性
・カスタマイズ可能なスクロール動作

Vue Routerの使い方

では、Vue Routerの使い方について見ていきます。

Vue Routerを使用するにあたり
JS側では2点、HTML側で1点書くべき内容があります、
それぞれを順に確認します。

【JS側で書くべきこと】
JS側では、ルート定義とルートコンストラクタを用意する必要があります。

ルートとはURLとViewの情報を持っている1つのレコードです。
つまり、ページ遷移に必要な情報をまとめたもので、
例えば以下のように書きます。

sample

{
  path: '/main',
  component: {
    template:'<div>メインページです、</div>'
  }
},
{
  path: '/user',
  component: {
    template:'<div>ユーザーページです。</div>'
  }
}

次にルートコンストラクタです。
上記で定義したルートをルートコンストラクタを用いたルート初期時のroutesオプションに設定します。
以下がその例です。

sample

new VueRouter({
  routes: [
    {
      path: '/main',
      component: {
        template:'<div>メインページです、</div>'
      }
    },
    {
      path: '/user',
      component: {
        template:'<div>ユーザーページです。</div>'
      }
    }
  ]
})

【HTML側で書くべきこと】
HTML側ではrouter-view要素、router-link要素を用意します。

router-viewはルート定義で書いたコンポーネントを実際に反映させるために、
router-linkはページを開いてからでもページ遷移ができるようにするために使用します。

以下が書き方の例です。

sample

<div id="app">
  <router-link to="/main">メインページ</router-link>
  <router-link to="/user">ユーザーぺージ</router-link>
  <router-view></router-view>
</div>

あとはいつも通りJS側でVueインスタンスを作成し、
ルーターのインスタンスをそのVueインスタンスに渡す処理を書けば
リンククリックでページが切り替わるSPAの完成です。

参考

書籍「Vue.js入門 基礎から実践アプリケーション開発まで」