vue-router 導入編 | Vite 環境で Vue 3.0 の CompositionAPI に触れてみる

前回、Vite のインストールと TypeScript サポートしていることの確認を行いました。

overflow-auto.hatenablog.com

実際に Composition API がどういうものであるか、Options API との違いを触りながら確認していこうと思います。

Options API とは

Composition API を語るときに、これまでのデータの記述方法は Options API と呼ぶようです。

Composition API RFC | Vue Composition API

コンポーネント内での記述箇所の比較図を見ると、これまで分散していた記述がスッキリとまとまったというのが分かると思います。

画像元: Vue Composition API - Logical Concerns vs. Option Types

2020/09/07時点の Vite には Vue-router は実装されていないので、まずはこれを導入していきましょう。

vue-router-next

Vue 2.0 では vue-router 3.0 が使われてきました。

Vue 3 においては vue-router 4.0 が公式になる予定です。

vue-router-next をインストールしていきます。

GitHub - vuejs/vue-router-next: The Vue 3 official router (WIP)

$ npm i --save vue-router@v4.0.0-alpha.11

インストールを終えたら router を使用するためのファイルを src ディレクトリ内に追加します。このあと追加するページ類も先に記述しておこうと思います。

src/router.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "./views/Home.vue";
import OptionsApi from "./views/OptionsApi.vue";
import CompositionApi from "./views/CompositionApi.vue";

const history = createWebHistory();
const routes = [
  {
    path: "/",
    component: Home
  },
  {
    path:"/options",
    component: OptionsApi
  },
  {
    path: "/composition",
    component: CompositionApi
  },
];
const router = createRouter({ history, routes });

export default router;

vue-router 3 までの表記とは幾分変わっています。

以前までは new VueRouter() で各 routes を定義していたと思いますが、createRouter() の引数 routes にパス一覧を渡すことで定義することができます。

ページ・コンポーネントの追加

src ディレクトリ内を以下のような構造にしていきたいと思います。

src/
  ├ assets/
  │　└ logo.png
  ├ components/
  │　└ HelloWorld.vue
  ├ views/
  │　├ Home.vue
  │　├ CompositionApi.vue
  │　└ OptionsApi.vue
  ├ App.vue
  ├ index.css
  ├ router.js
  └ main.js

• App.vue
  • App.vue ファイル内で router-view を呼び出します。
• views/Home.vue
  • CompositionApi.vue, OptionsApi.vue へのリンクを表示するページです。
• views/CompositionApi.vue
  • Composition API で記述するページです。
• views/OptionsApi.vue
  • Options API で記述するページです。

各ファイルの記述

src/App.vue

<template>
  <router-view />
</template>

<script>
export default {
  name: "App"
};
</script>

---

views/Home.vue

<template>
  <h2>Comparison between CompositionAPI and OptionsAPI</h2>
  <div>
    <template v-for="(route, key) in routes" :key="key">
      <p>
        <router-link
          :to="route.to"
          :class="{ active: isActive(route.to) }"
        >
          {{ route.text }}
        </router-link>
      </p>
    </template>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed: {
    routes: () => [
      {
        to: "/composition",
        text: "Composition API"
      },
      {
        to: "/options",
        text: "Options API"
      }
    ]
  },
  methods: {
    isActive(path) {
      return path === this.$route.path
    }
  }
}
</script>

---

views/CompositionApi.vue

<template>
  <div>
    <p>Composition API</p>
  </div>
</template>

---

views/OptionsApi.vue

<template>
  <div>
    <p>Options API</p>
  </div>
</template>

おわり

これで、各パスでページが表示できるようになります。

• http://localhost:3000/composition
• http://localhost:3000/options