Vue Routerを利用する

2022年3月29日

Vue Router を利用する

「Vue Router」を使うと、Vue を使って、ページ毎の表示が簡単にできる様になります！この記事は、「Vue Router」の基本的な使い方を紹介しています。

Vue の基本は「１ページ」

前の記事でも触れていますが、Vue などのフロントエンドのフレームワークの表示の基本は「１ページ」です。基本になる HTML のページに、Vue が表示させる「部品」を組み込んで表示させるというのが基本的な仕組みになっているのが理由です。しかし、通常の Web サイトの様に、ページ単位で表示を作れると便利なので、ページ毎の「部品」を作成して、アプリを作る場合も多くなっています。前回は、Vue の基本機能である「v-if」を使って表示するページを切り替える方法を紹介しました。
実は、Vue は、こうしたページ毎の表示をサポートするパッケージ（モジュール）を予め用意していて、ページ毎の表示を簡単に行うことが可能です。この記事では、そのパッケージ（モジュール）の、「Vue Router」の使い方を紹介します。

一番簡単な方法は？

「Vue Router」を一番簡単に使う方法は、Vue のプロジェクトを作成する際に、「Vue Router」を使う事を予め選択する方法です。予め、選択する事で、プロジェクト作成時に必要な設定を行なってくれるので、あとはページを追加する感じで利用する事ができます。

以前紹介した、「npm init vue」を利用して Vue のプロジェクトを作成する場合には、以下のような感じで実行されますが、その際に、「Add Vue Router」の質問のところで、「Yes」を選択すると自動的に、「Vue Router」を組み込んでくれます。

$ npm init vue
Need to install the following packages:
  create-vue
Ok to proceed? (y)

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-router-sample
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /home/parallels/Documents/vue-router-sample...

Done. Now run:

  cd vue-router-sample
  npm install
  npm run dev

$

プロジェクトフォルダの下の「src」フォルダに下に、「router」と「views」というフォルダが作成されます。「router」が Vue Router の基本設定のファイル「index.js」が置かれているフォルダになります。「views」が各ページの部品の「xxx.vue」ファイルを置くフォルダになります。

標準設定で、ニつのページがサンプルとして作成されています。

Home
About です.

Vue Router の基本設定のファイルは、「src/router」のフォルダにある「index.js」で行なっています。以下が、自動的に作られた「index.js」の中身です。

// (src/router/index.js)
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      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("../views/AboutView.vue"),
    },
  ],
});

export default router;

二つのページは、「src/views」の下に以下の二つのファイルに書かれています。

HomeView.vue
AoubtVue.vue

他のファイルで記述された「部品」を扱うには「import」を使って、利用するファイルに取り込む必要があります。このファイルでは、二つのやり方で取り込んでいます。

「HomeView.vue」は、「import HomeView from '../views/HomeView.vue'」で取り込んでいます。「AboutView.vue」は、「component: () => import('../views/AboutView.vue')」で取り込んでいます。

どちらでも良いのですが、最初はわかりやすい「HomeVuew.vue」を取り込むやり方を使うようにします。つまり、必要なページを最初に取り込むやり方です。慣れてきたらやり易い方法を利用すれば良いかと思います。

「Vue Router (vue-router」で提供されている関数で利用する物も予め「import」で取り込んでおきます。この例では、「createRouter」と「createWebHistory」の二つの関数です。

この関数を使って、ページ毎に表示する仕組みの設定を行なっています。詳細の中身については、サンプルプロジェクトを使うと自動的に作ってくれるので、この記事では「使い方」を説明します。細かい解説は、もう少し学習が進んだ段階で学習した方がわかり易いと思いますので、まずは「使い方」を覚えてください。

必要なのは、表示するページを取り込む事と、ページの「場所」の指定です。

routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      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("../views/AboutView.vue"),
    },
  ],
});

取り込み方を、最初に「import」で取り込む方法に統一するので、以下のように書き換えます。

// (src/router/index.js)
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      component: AboutView,
    },
  ],
});
export default router;

「routes」の部分で、「部品」と「部品の場所（リンク）」を指定しています。このリンクを Web ブラウザの URL を指定するフィールドに入力すると、そのページを表示できるようになります。これで、通常の Web サイトのようにページを指定できるようになります。開発用のサーバーを使う場合には、

HomeView -> 「localhost:3000/」を指定
AboutVuew -> 「localhost:3000/about」を指定すると、それぞれのページを表示できる様になります。

ページを追加したり削除する場合には、必要なページを取り込む「import」と場所を指定する「routes」の部分の記述を変更します。

ページの選択は？

表示するページの選択は二つの方法で指定できます。

Web ブラウザで「リンク」を入力して指定
メニュー（ナビゲーション）で指定

Web ブラウザの URL（リンク）を入力するフィールドで指定する方法は上で説明した通りです。もう一つは、前回の記事のように、メニュー（ナビゲーション）の表示を作成して、それをクリックしたら指定されたページを表示できる様にできます。サンプルのプロジェクトでは、「App.vue」で行なっています。

「App.vue」の HTML の部分（template タグの部分）を抜き出してみました。

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="@/assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

「nav」のタグで囲まれた部分がメニュー（ナビゲーション）の部分です。

<RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink>

「RouterLink」という Vue Router の機能を利用すると、前回の例のように、クリックされた際の処理を書く必要はありません。クリックすると、「src/router/index.js」で設定している場所に相当するページを表示してくれます。場所は、「to="xxx"」で指定します。「RouterView」が Vue Router の選択されているページを表示するという書き方です。

あとは、各ページの部品を作成すると、通常の Web サイトの様にページ単位で表示を切り替えることができる様になります。

Web サイトのページ選択の仕組み

Web サイトで、どのページを表示するかを決める事を「ルーティング(Routing)」と呼んでいます。これが、「Router」という名前がついている理由です。通常の Web サイトでは、この処理をインターネット上にある Web サイトのサーバーで行なっています。
簡単にいうと、Web ブラウザで指定されたリンク（URL）をサーバーに送って、サーバーが必要なページの情報を Web ブラウザに送る仕組みでページの切り替えをしています。
今回紹介した Vue Router は少し仕組みが違います。Vue Router のページの切り替えは、Web ブラウザで動いている Vue Router のプログラムが行なっています。理由は、少し難しい話になりますが、Web サーバーは、「一つのページ」だと思っているので、Vue のアプリの場合は、元になる一つのページの情報のみを Web ブラウザに送っています。その中に、Vue Router が切り替える全部のページの情報が入っていて、Vue Router が必要に応じて切り替える仕組みになっています。このページが通常は、npmなどを利用してプロジェクトを作成して開発する場合は、「index.html」です。
ところが、Web ブラウザで、リンク（URL）を指定した場合には、Web ブラウザ自体は、Vue Router が切り替えをしているかどうかはわからないので、基本的に、Web サーバーにリクエストを送ってしまいます。上の例で説明すると「localhost：3000/about」と指定すると、「about」のページ情報を Web サーバーが探します。ところが、実際の「about」のページは Vue の表示情報の一部（index.html）の一部の情報として扱われているので、サーバー側には存在しません。したがって、そのままでは（ページが見つからない）エラーになってしまいます。開発用のサーバーでは、これをエラーにしないように「特別な設定」がされています。
ところが、インターネットに公開する際に、同じような設定をしないと、Vue Router を利用している場合には、こうした、エラーが起きる事があります。その場合は、どのページを Vue が切り替えをしているかをサーバーに予め設定して教えておく必要があります。
今回紹介した例では、「src/router/index.js」で、「createWebHistory」という「ルータ」を指定していますが、別のルータに「WebHashHistory」という「ルータ」の指定も可能です。違いは、Web ブラウザでリンクの場所を指定する場合に、「#(ハッシュ/Hash）」を入れるか入れないかになります。開発サーバーの URL の例では、「localhost:3000/about」か「localhost:3000/#/about」の様になります。「＃」が入ると、Web ブラウザは、現在表示しているページの中のタグだと考えて、サーバーにリクエストを送らなくなるので上で書いたような問題が起きなくなります。これは HTML では、「＃」がページ内の特定の場所を表示するためのタグに使われているためです。
今回の例の場合は、通常の Web サイトの様にリンクを指定できるので便利ですが、サーバーの設定が必要になります。

まとめ

今回は、Vue Router を使って、ページ毎の表示を行う方法を紹介しました。 Web ブラウザでページを指定できるので、Web サイトの様に利用できるので便利です。
本文でも紹介している通り、Web ブラウザでリンクを指定する場合は、Web ブラウザの基本動作と HTML の表示の仕組みをよく理解していないと、サーバー側でエラーにしてしまう場合があります。少しづつで良いので、Web サイトの仕組みを理解しながら、Web 開発の学習を進めていくと、そうした問題を事前に避けることも可能になります。
これを機会に、Vue Router など、ブラウザ側でページの切り替えを行う場合には、サーバー側で特別な設定が必要になる場合があると覚えておいてください。
次回は、サーバー側の設定の例を、Firebase で Web ホスティングを行う場合を例に紹介します。 2022 年 4 月 2 日にお届けの予定です。お楽しみに！

足し算以外もできるようにする

9/29/2022

このブログを検索

シリコンバレースーパーウエア