zukucode
主にWEB関連の情報を技術メモとして発信しています。
Vue.js

vue-routerを導入してSPAを作成する

Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション（spa）を作成します。

開発環境やフォルダ構成はwebpack モジュールのパスを絶対パスで指定する方法で扱ったものと同様とします。

パッケージのインストール

最初にvue-routerのパッケージをインストールします。

$ npm install --save-dev vue-router

コンポーネントの作成

SPAの制御を実装する前に動作確認用のページが必要なので３ページほど作成します。

新しくpagesフォルダを作成し、この中にページのコンポーネントを作成します。

Top.vue
<template>
  <div>
    Topページ
  </div>
</template>
About.vue
<template>
  <div>
    Aboutページ
  </div>
</template>
Contact.vue
<template>
  <div>
    Contactページ
  </div>
</template>

メインコンポーネントの修正

App.vueで以下のようにrouter-linkとrouter-viewのコンポーネントを読み込みます。

router-linkはナビゲーションのリンクでrouter-viewに表示しているページに応じたコンポーネントが表示されます。

App.vue
<template>
  <div>
    <router-link to="/">
      top
    </router-link>
    <router-link to="/about">
      about
    </router-link>
    <router-link to="/contact">
      contact
    </router-link>
    <router-view></router-view>
  </div>
</template>

routerファイルの作成

vue-routerの設定をするファイルrouter.jsを作成します。ファイル名は自由に変更しても問題ありません。

webpack モジュールのパスを絶対パスで指定する方法で紹介した方法でImportは絶対パスで指定しています。

router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Top from 'js/pages/Top.vue';
import About from 'js/pages/About.vue';
import Contact from 'js/pages/Contact.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Top },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

const router = new VueRouter({
  routes,
  mode: 'history'
});

export default router;

エントリーポイントの修正

エントリーポイントにvue-routerを読み込む処理を追加します。

app.js
import 'less/app.less';
import Vue from 'vue';
import store from 'js/store';
import http from 'js/http';
import router from 'js/router';
import App from 'js/components/App.vue';

Vue.use(http, { store });

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

実行

各リンクをクリックするとURLが変更されますが、ページ全体の再描画は行われずに、router-view内容がURLに対応したコンポーネントが表示されます。

Vue.js

関連記事