なろう講習会

Appearance

vue-routerの設定 ​

実習編目標 ​

  • API を利用するクライアントを書く
  • 複数ページが存在するクライアントを書く

WARNING

前回に作成したサーバーを利用します。先に前回の内容を終わらせるようにしてください。

今回は「エンドポイントにアクセスする」に書いてある最重要課題を一番やってほしいです。 途中のコードなどはバシバシコピー&ペーストしてもらっても構いません。

最重要課題はこれまでのコードを上手く組み合わせることで実現できるはずです。 どのような API が必要か、それをどうやって表示すればいいかを自分で考えて作ってみましょう。

Vueのプロジェクトを作成する ​

第一部のVue入門の時と同じように https://github.com/traPtitech/naro-template-frontend のテンプレートリポジトリからリポジトリを作成します。 クローンしてきたディレクトリを VSCode で開いておきましょう。 npm iするのを忘れずに。

Vue Routerの導入 ​

SPA を作る際には、pathに応じたページを描画する Router のような補助ライブラリが使用すると便利です。 今回は、公式 Router であるVue Router v4.xを使用します。

参考: Routing | Vue.js

1. ライブラリのインストール ​

npm install vue-router@4 を実行してください。

2. Routerの設定 ​

pathと描画対象の関係である Route を定義します。 src以下に、router.tsを以下の内容で作成してください。

typescript
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './pages/HomePage.vue'
import NotFound from './pages/NotFound.vue'

const routes = [
  { path: '/', name: 'home', component: HomePage },
  { path: '/:path(.*)*', component: NotFound }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Vue Router を定義しているファイルです。

ページを追加したい場合は、routesの中にオブジェクトを追加していけば OK です。

参考: Routes' Matching Syntax | Vue Router

App.vue に書かれている、<router-view/>コンポーネントが、このファイルで指定されたコンポーネントに置き換えられ描画されます。

参考:
router-link | Vue Router
router-view | Vue Router
Vue Router

3. Vue Routerの使用 ​

Vue Router を読み込むようにsrc/main.tsを以下のように変更します。

typescript
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'

createApp(App).use(Router).mount('#app')

次に、src/App.vueを以下のように変更します。

vue
<template>
  <main>
    <div :class="$style.container">
      <header :class="$style.header">
        <router-link to="/">Home</router-link>
      </header>

      <router-view />
    </div>
  </main>
</template>

<style module>
.container {
  max-width: fit-content;
  margin: auto;
}
.header {
  display: flex;
  justify-content: center;
}
</style>

INFO

<router-view>というコンポーネントは自身のpathに応じて描画するコンポーネントを変えるものです。その設定をrouter.tsで行っています。

また、<router-link>は<a>タグのようにリンクとして働きますが、ページのリロードを引き起こしません。これによってページの移動の速度を向上させることができます。

参考: Getting Started | Vue Router

4. Homeページの作成 ​

src直下にpagesディレクトリを作成し、src/pages/HomePage.vueを以下の内容で作成してください。

vue
<script setup lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
</script>

<template>
  <hello-world msg="Hello Vue 3 + Vite" />
</template>

5. NotFoundページの作成 ​

router.tsに定義した Route の配列は先頭からマッチします。

typescript
export const routes = [
  { path: '/', name: 'home', component: HomePage },
  { path: '/:path(.*)*', component: NotFound }
]

この後、皆さんにはいくつかのページとそのpathの対応を追加してもらうわけですが、どのpathにもマッチしなかった場合、任意のpathにマッチする/:path(.*)*がマッチし、NotFound ページが表示されます。

src/pages/NotFound.vueを以下の内容で作成してください。

vue
<template>
  <header>
    <h1>Not Found {{ $route.path }}</h1>
  </header>
</template>

初期状態の確認 ​

WARNING

PC にインストールされているセキュリティソフトによっては開発ページにアクセスできないことがあるようです。 その場合は、セキュリティソフトのファイアウォールを一時的に停止するか、ターミナルからnpm run devで起動した後、表示される IP アドレスでの URL にアクセスしてみてください(できない場合は TA に聞いてください)

これまでと同様にnpm run devで起動して、以下のような画面が表示されていれば OK です。