Vue Router

Vueでは、シングルページアプリケーション (SPA) をつくることができます。
SPAでは、ページは1枚だけです。
しかし、URLをもとに複数の画面を表示したいときもあります。
そんなときに、Vue Router を使ってルーティングを行います。

router.vuejs.org

Vue Router は、VueにおけるSPAで、ルーティングを制御するためのプラグインです。
Vue Routerを使うことで、SPAに複数ページを疑似的に実現することができます。

Vue Routerのインストールは、Vue CLI を使って簡単にできます。
一つは、vue createでプロジェクトを作成するときに、Vue Routerを選択し、追加することができます。
別の方法として、vue add vue-routerとすることでインストールすることができます。

Vue Routerでは、Routerクラスのインスタンスをつくり、Vue app本体に追加することで利用できます。

Routerクラスのインスタンス作成時には、routesを渡すのですが、その中でルーティングの設定を行います。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

終わり