過去記事で4回にわたって、Vue.jsとTypeScriptの環境でシングルページアプリケーションを導入部分や状態管理についてをまとめてきましたが、最終回となる今回の第5回目では、「Vue Router」を使ってルーティングを設定することで、いよいよシングルページアプリケーションとして形になってくるところを作成していきたいと思います。Vue RouterはVue.jsでルーティングの設定に使われるライブラリで、最もスタンダードなものと言えます。シングルページアプリケーションを開発する際には必須になってきます。   開発環境やコンポーネント、状態管理については過去記事をご参考ください。本記事はこの記事の内容をベースに進めています。 ・Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃1：環境構築 ・Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃2：コンポーネント作成・PropsとEmit ・Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃3：Vuexで状態管理 ・Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃4：axiosで非同期通信   ここまで状態管理を追加したところからさらにルーティングの設定も加えていきます。ルーティングの設定ファイルと、URLごとに表示を切り分けるページ用のコンポーネントをpagesディレクトリに格納し、新たに追加しています。

........
  ┣ src
    ┗ ts
      ┣ main.ts
      ┣ store.ts
      ┣ route.ts <- 追加
      ┗ vue
        ┣ app.vue
        ┣ pages
          ┣ Home.vue <- 追加
          ┣ PageFoo.vue <- 追加
          ┗ PageBar.vue <- 追加
        ┗ components
          ┣ ListDraft.vue
          ┣ ItemDraft.vue
          ┣ ListOfficial.vue
          ┣ ItemOfficial.vue
          ┗ UpdateButton.vue
  ┣ ......
  ┗ types
    ┣ vue.d.ts
    ┗ vuex.d.ts

  まずはモジュールをインストールしていきます。Vue.jsの3系に対応させるためには、Vue Routerの4系が必要になるので、バージョンを指定してインストールしていきます。

$ npm install vue-router@4

  モジュールの方が追加されました、続いてルーティングの設定を行っていきます。

{
  .....
  "dependencies": {
    .....
    "vue-router": "^4.1.3",
    .....
  },
}

  （補足）前回のVuexの時には型定義ファイルを用意しましたが、Vue Routerの場合には現時点ではまだ正式なリリースがなく、一部環境で使えるということでしたので、今回は省略しています。 https://router.vuejs.org/guide/advanced/typed-routes.html   モジュールがインストールできたら、エンドポイントのスクリプトで、Vue Routerを読み込んでいきます。Vuexと同じく、Vue Routerもuse()メソッドで指定してあげることで使えるようになるので忘れないようにしておきたいですね。 【main.ts】

import { createApp } from 'vue';
import { store, key } from './store';
import { router } from './route';
import App from './vue/app.vue';

const app = createApp({});
app.component('app', App)
  .use(store, key)
  .use(router)
  .mount('#app');

  続いてルーティングの設定ファイルです。基本的は下記のような指定をページに合わせてルーティングを定義していきます。ページ用のコンポーネントはここでインポートする必要があります。URLパスの名前も合わせて指定し、ページコンポーネントと紐付けます。 【route.ts】

import { createRouter, createWebHistory } from 'vue-router';
import Home from './vue/pages/Home.vue';
import PageFoo from './vue/pages/PageFoo.vue';
import PageBar from './vue/pages/PageBar.vue';

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/foo',
      name: 'Foo',
      component: PageFoo
    },
    {
      path: '/bar',
      name: 'Bar',
      component: PageBar
    }
  ]
});

  続いてコンポーネント側を見ていきます。シングルページアプリケーションではページのコンテンツ全体が動的に変わるようになります。そのため、コンテンツ部分はページ専用のコンポーネントとして切り出しておくと便利です。「router-view」要素を使うと、その中でページURLに合わせて動的にコンポーネントが読み込まれるようになるます。また、この時のページ遷移は通常のアンカー要素ではなく、「router-link」を使って「to」属性の値に遷移先のURLパスを指定します。 【app.ts】

<template>
  <nav>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/foo">Foo</router-link>
      </li>
      <li>
        <router-link to="/bar">Bar</router-link>
      </li>
    </ul>
  </nav>
  <router-view />
</template>

<script lang="ts" setup></script>

  そしてページコンポーネント側です。元々あったページ全体のコンポーネントにページ内で使う値や処理を同一のテンプレート内に記述していましたが、そのままページコンポーネントに移設していきます。ページコンポーネント内ではURLパスなどルーティングの情報を扱うことができます。Vuexの時と同じく、「useRoute」をすることで情報にアクセスできます。Vue.jsの2系では、$routeでアクセスしていましたが3系ではそれを使うことができませんので注意が必要ですね。 【pages/Home.vue】

<template>
  <h1>Current page ：{{ route.name }}</h1>
  <section>
    <list-draft :props-items="store.getters.getApiData" />
    <list-official :props-items="store.getters.getOfficialItems" />
  </section>
  <update-button @update-items="update()" />
</template>

<script lang="ts" setup>
  import { reactive, computed } from 'vue';
  import { useStore } from 'vuex';
  import { useRoute } from 'vue-router';
  import { key } from '../../store';
  import ListDraft from '../components/ListDraft.vue';
  import ListOfficial from '../components/ListOfficial.vue';
  import UpdateButton from '../components/UpdateButton.vue';
  interface dataInterface {
    id: number, isChecked: boolean, title: string,
  } 
  const store = useStore(key);
  const route = useRoute();
  store.dispatch('fatchApiData');
  const data: { officialItems: dataInterface[] } = reactive({ 
    officialItems: []
  });
  const checkedItems = computed(() => {
    return store.getters.getApiData.filter((item: dataInterface) => {
      return item.isChecked;
    });
  });
  const update = () => {
    data.officialItems = checkedItems.value;
    store.dispatch('updateOfficialItems', data.officialItems);
  }
</script>

  複数ページがある場合にはそれぞれのページコンポーネントも用意しておきます。ページコンポーネントが一通り揃うと、シングルページアプリケーションとして完成です。 【pages/PageFoo.vue ＆ pages/PageBar.vue】

<template>
  <h1>Current page ：{{ route.name }}</h1>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  const route = useRoute();
</script>

   

404ページの作成

アプリケーションの要件として、404エラーページが必要になることも多々あります。特にこの形で作成したアプリケーションでは、ルーティングで設定したURLに直接アクセスしてしまいますと、エラーとしてページコンテンツが表示されなくなってしまいます。その時にエラー通知用のページコンポーネントを作成します。   合わせて、ルーティングの設定時に、URLのパス指定でワイルドカードを入れる形になります。ここでは2系と3系で書き方が少し異なる部分あるので注意します。 【route.ts】※一部抜粋

import Error404 from './vue/pages/404.vue';

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    .....
    {
      path: '/:pathMatch(.*)*',
      name: 'Page Not Found',
      component: Error404
    },
  ]
});

   

ルーティングの処理を関数に含める

先ほどはルーティングでのページ遷移でa要素が自動的に出力される「router-link」を使いましたが、関数の中で使いたい時もあります。その場合には「router.push()」のメソッドでパスを指定し、異なるルーティングでの遷移ができるようになります。

<template>
  <button @click="routerLink('/foo')">Foo</button>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const routerLink = (name: string): void => {
    router.push(name);
  }
<script>

   

動的ルーティングに対応する

ブログ記事など、投稿データを取得して、ページごとに個別のコンテンツを表示させる場合には、URLのパスの名称部分が変数化しておく必要があります。Vue Routerでは、このようなケースでも簡単に対応することができます。 【route.ts】※一部抜粋

import PostDetail from './vue/pages/PostDetail.vue';

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    .....
    {
      path: '/post/:id',
      name: 'PostDetail',
      component: PostDetail
    },
  ]
});

  動的ルーティングで設定した情報は「route.params」などを使ってアクセスし、コンポーネント内で扱うことができます。

<template>
  <h1>Current page ID ：{{ route..params.id }}</h1>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  const router = useRouter();
<script>

 

---

  前回までの記事で、各コンポーネントに分けて状態管理もできるようになっていましたが、今回でルーティングが完成すると、いよいよシングルページアプリケーションとして機能するようになります。それぞれ必要なモジュールを揃えてあげる必要はありますが、一括で用意しておくことで開発もスムーズに進めることができますので、ぜひ覚えておきたいですね。   （こちらの記事も合わせてどうぞ） ・Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃1：環境構築 Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃2：コンポーネント作成・PropsとEmit Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃3：Vuexで状態管理 Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃4：axiosで非同期通信