コラム

[Vue.js]Vue RouterでSPAのルーティング制御

Vue RouterとはVue.jsのプラグインの一つで、SPA(Single Page Application)のルーティング制御をする為のものです。
Vue Routerを使用すると、ページ全体のリロードをせずに画面遷移するアプリケーションを簡易に実装する事が出来ます。
ブラウザの戻る、進むにも対応が可能でさらにユーザビリティを向上させる事が出来ます。
以下で簡単なサンプルを構築しながら見ていきたいと思います。

開発環境

Windows10 Enterprise
npm 8.1.2
node 16.13.2

プロジェクト作成

・プロジェクト作成コマンド

#プロジェクト作成コマンド(今回はvue-router-sampleプロジェクトとする)
vue create vue-router-sample

今回はvue-router-sampleプロジェクトとします。

・プロジェクト作成種類を選択

#マニュアル作成を選択( Manually select featuresを選択 )
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features

Manually select featuresを選択します。

・使用プラグイン等を選択

#Routerへのチェックを追加
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Routerへのチェックを追加します。

・Vue.jsバージョン選択

#2.xを選択(3.xだと動作しないブラウザがあった為)
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

2.xを選択します。(3.xだと動作しないブラウザがあった為)

・構文チェック機能等選択

  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

1.ESLint with error preventation only :構文チェック機能(推奨されるルールをチェック)
2.ESLLint + Airbnb config:構文チェック機能
  (コミュニティによって定義されているルールをチェック)
3.ESLLint + Standard config:構文チェック機能
  (コミュニティによって定義されているルールをチェック、Airbnbとはルールが違う)
4.ESLint + Prettier:整形ルールにのっとり自動修正される

とりあえず一番ゆるい ESLLint + Standard config を選択します。

・Lint機能の追加設定

>(*) Lint on save
 ( ) Lint and fix on commit

1.Lint on save:保存時にLint実行
2.Lint and fix on commit:gitなどへのコミット時にLint実行

Lint on saveを選択します。

・Babel、PostCSS、ESLintなどの設定をどこでするか選択

> In dedicated config files
  In package.json

1.In dedicated config files:専用の設定ファイルで管理
2.In package.json:package.jsonで一括管理

In dedicated config filesを選択します。

・設定ファイル名入力

#router-sampleと入力
? Save preset as:

設定ファイル名をrouter-sampleとし、エンターを押すとプロジェクト作成が始まります。

・動作確認

プロジェクト作成が完了したらとりあえず動かしてみます。

cd vue-router-sample
npm run serve

コマンド起動後 http://localhost:8080 にアクセスします。

以上のような画面が表示されます。画面の上記部分のHomeとAbout部分のリンクで画面内部の表示を切り替える事が出来ますが、この部分でルーティング機能を使用しています。

実装(src)部分を見ていく

ディレクトリ構成

vuex-router-sample/
           ├─ node_modules/
           ├─ public/
           ├─ src/
           ├─ assets/
                ├─ components/
                ├─ router/
                ├─ views/
           ├─ babel.config.js
           ├─ package.json
           ├─ package-lock.json
           ├─ README.md

・routerディレクトリにはindex.jsを作成し、vue routerの使用設定部分を記述します。
・viewsディレクトリには画面用のコンポーネントを管理するディレクトリです。

実装

・main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; ①

Vue.config.productionTip = false;

new Vue({
  router, ②
  render: (h) => h(App),
}).$mount("#app");

①でルーティング部分の実装ディレクトリを宣言し、②でVueで使用出来るようにしています。

・App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> | ①
      <router-link to="/about">About</router-link> ②
    </div>
    <router-view /> ③
  </div>
</template>

<style>
・・省略
</style>

①と②でルーティングのパスを指定します。リンクを押下すると紐づく画面が表示されます。パスと画面の設定はrouterディレクトリにinex.jsで定義しています。(後程説明します)
③の箇所はパスに紐づく画面を表示する場所です。この記述が無いと画面コンポーネントの内容は表示されません。

・router/index.js

Vue Router使用宣言、ルーティング定義やその他設定を行います。

import Vue from "vue"; ①
import VueRouter from "vue-router"; ②
import Home from "../views/Home.vue"; ③

Vue.use(VueRouter); ④

const routes = [
  {
    path: "/",
    name: "Home",   ⑤
    component: Home,
  },
  {
    path: "/about",
    name: "About",  ⑥
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({ ⑦
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

① Vueを宣言しています。
② VueRouterを宣言しています。
③ ルーティングのパスと紐づける画面コンポーネントを宣言しています。
④ VueRouterを使用する為に必要な宣言みたいです。
⑤ パス「/」に対して表示するコンポーネントを指定しています。
  ルートパスの場合「Home」コンポーネントが表示されます。
⑥ パス「/about」に対して表示するコンポーネントを指定しています。
  Homeの時と違い、「component: () =>Import」の部分で定義しています。
  これは、パスが呼ばれた際にコンポーネントを生成するLazyLoadをする仕組みだと思われます。
⑦ VueRouterにルーティング情報の設定、modeでは「hash」又は「history」から選択可、
  baseではルートURLの設定をしています。例では環境変数の設定値をとっていますが、
  初期では設定ファイルがないので必要であれば自分で作る必要があります。

・modeについて・・・
  hashモードではURLが以下の用に表示されます。
  http://localhost:8080/#/About
  urlの 「#」を見つけてそれより先の文字列を元にコンポーネントを切り替えます。
  historyモードより早くてHTML5 History API をサポートしていないブラウザでも
  動くのがメリットです。

  historyモードではURLが以下の用に表示されます。
  http://localhost:8080/About
  urlに「#」がつかないのがメリットです。

・viewディレクトリ以下

viewsディレクトリ以下にはリンク押下時に表示する画面のコンポーネントのファイルが入っています。
「/」パス用のHome.vueと「/About」パス用のAbout.vueがあるので、それぞれ見ていきます。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

上記のファイルの内容が各パスの応じて表示されます。
このファイルの内容を変えれば表示される内容も変わります。

以上でVue Routerを使用してSPAのルーティングを実現してみました。
非常に簡単にSPAが作る事が出来るのが分かりました。
この形からパスと画面コンポーネントを追加していき、独自のシステムを作っていけば良いと思います。
次は独自でもう少し複雑なSPAアプリを作成する例などを記事にしてみたいと思います。

この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせはこちら
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問