SPA Vue.js

最近フロントサイドの勉強がてらポートフォリオサイトを作成している際に、Vue.jsでSPAを作成する事がありました。その時に使ったVue.Routeという機能が便利だったので忘備録がてらまとめて行きたいと思います。

VueRouterとはVue.jsを用いてシングルページアプリケーションを作成する際に用いる拡張ライブラリの一つになります。vueのコンポーネントとURLを紐付け、同一ページ内で画面遷移を行います。使うためにはターミナルなどからプロジェクトにインストールしておく必要があります。

// インストールコマンド
vue add router

必要な記述はindex.jsへのルート定義、main.jsへのrouter読み込み、App.vueへの読み込み位置記述くらいで簡単にSPAを作成することが可能です。

// index.js

//インスタンスの生成
const aaa = new VueRouter({
// パスとコンポーネントを紐付ける
  routes: [
   {path: "/", component: コンポーネント名}
  ]
})

// main.js

new Vue({
  el: "aaa",
  router,
  render: h=> h(App)
})

上記程度の記述で同一ページないでの画面遷移が可能になるので、また利用する機会があれば使って行きたいと思います。

今日は以上です。