Vue Router — Setup

テクノロジ系／ L04 routing — ルーティング

Vue Router — Setup

install

$ pnpm add vue-router

ルート定義と provide

src/router.ts:

import { createRouter, createWebHistory } from "vue-router";
import HomePage from "./pages/HomePage.vue";
import AboutPage from "./pages/AboutPage.vue";
import UserList from "./pages/UserList.vue";
import UserDetail from "./pages/UserDetail.vue";

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: HomePage },
    { path: "/about", component: AboutPage },
    { path: "/users", component: UserList },
    { path: "/users/:id", component: UserDetail },
    { path: "/:pathMatch(.*)*", component: NotFound },   // 404
  ],
});

src/main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router.js";

createApp(App).use(router).mount("#app");

App.vue で <RouterView>

<script setup>
import { RouterView, RouterLink } from "vue-router";
</script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/users">Users</RouterLink>
  </nav>

  <main>
    <RouterView />        <!-- ここに該当ページが描画される -->
  </main>
</template>

<RouterView> がページ描画ポイント。

<RouterLink to="..."> で SPA 遷移。

RouterLink の active class

<RouterLink
  to="/about"
  active-class="text-blue-500"
  exact-active-class="font-bold"
>About</RouterLink>

または CSS で .router-link-active を指定。

history モード

createWebHistory();          // /about      ← 推奨
createWebHashHistory();      // #/about     ← 静的ホスト用
createMemoryHistory();       // テスト用

通常は createWebHistory()。

ただし /about を直接開けるよう サーバ側 SPA fallback が必要。

Vite config の proxy (前リポと同じ)

// vite.config.ts
server: {
  proxy: {
    "/api": "http://localhost:3000",
  },
}

プログラマブル遷移 — useRouter

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

async function login() {
  await doLogin();
  router.push("/dashboard");
}
</script>

router.push() で遷移。

router.replace() で履歴を置き換え。

router.back() で1つ戻る。

まとめ

createRouter({ history, routes })
app.use(router) で登録
<RouterView> で描画ポイント、<RouterLink> でSPA遷移
useRouter() でプログラマブル遷移
SPA fallback がサーバ側に必要

次は 動的ルート。

考えてみよう

既定では正解・不正解の判定はしません。自分のペースで「答えを見る」を。採点してほしい場合だけ「採点してほしい」を押してください。

Vue Router setup — 演習

pnpm add vue-router

Lv1: 基本 — 3ページ

問題

src/router.ts:

import { createRouter, createWebHistory } from "vue-router";

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: () => import("./pages/Home.vue") },
    { path: "/about", component: () => import("./pages/About.vue") },
    { path: "/contact", component: () => import("./pages/Contact.vue") },
    { path: "/:pathMatch(.*)*", component: () => import("./pages/NotFound.vue") },
  ],
});

main.ts:

createApp(App).use(router).mount("#app");

App.vue:

<script setup>
import { RouterView, RouterLink } from "vue-router";
</script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/contact">Contact</RouterLink>
  </nav>
  <RouterView />
</template>

合格基準

4ルートが動く (含 404)
SPA 遷移

Lv2: 応用 — useRouter で遷移

問題

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

async function login() {
  // 認証処理
  router.push("/dashboard");
}

function back() {
  router.back();
}

function replace() {
  router.replace("/home");   // 履歴に積まない
}
</script>

<template>
  <button @click="login">Login</button>
  <button @click="back">Back</button>
  <button @click="replace">Replace</button>
</template>

合格基準

3操作とも動作
push / replace / back の差を理解

Lv3: 発展 — RouterLink の active class

問題

<RouterLink
  to="/about"
  active-class="text-blue"
  exact-active-class="font-bold"
>About</RouterLink>

.text-blue { color: blue; }
.font-bold { font-weight: bold; }

/about 訪問時 → text-blue + font-bold

/about/team 等の子ルート訪問時 → text-blue だけ (exact ではない)

合格基準

活性化スタイルが切り替わる
exact-active-class の意味を理解

提出

submission.md に3問の回答を。