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

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

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

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

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

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

$ npm install --save-dev vue-router

コンポーネントの作成

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

新しく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-linkrouter-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コンポーネントでvue-routerのページ制御を行う

    vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.jsを学習する上で知っておきたいES2015の文法

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...