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-router 現在のパスによってスタイルを変更する

    vue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。vue-ro...


  • vue-router ページ遷移時にアニメーションスクロールをする

    vue-routerでページ遷移するときにスクロールの位置をトップ(一番上)に移動させたいとき、公式サンプルにしたがって以下のように実装します。routerの値をwatchして、変更されたタイミングで...


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

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


  • vueコンポーネントでvue-routerのページ制御を行う

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


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

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビ...


  • Electronとvue-routerを併用するときの注意点

    Electronとvue-routerを使うときに、ページ制御がうまく行かないときはrouterの設定を確認します。modeがhistoryになっているとなぜかうまく行かなかったのでhashに変更しま...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • Vuex actionの処理でaxiosでajaxを行う

    Vuexのactionでaxiosのライブラリを使ったajaxの処理を行います。処理の流れとして、http(axios)でajaxアクセスを行い、成功時はmutationをコールして、storeに取得...


  • Vuex 厳格(strict)モードでエラーになるよくある原因

    Vuexの厳格(strict)モードでエラーになってしまう原因でよくあるパターンです。stateに格納した配列をソートして表示するときに、stateの値をcomputedやgettersでそのままソー...


  • Vuexとaxiosを連携する

    ajaxの処理が増えるたびに同じmutationを実行するように処理を入れるのは大変なので、axiosの処理でmutationを実行するようにします。axiosにはinterceptorsという機能が...