ルーティング

Vue Routerではファイルにルーティング情報を追加するが、Nuxtでは不要

NuxtPageタグ

Vue RouterのRouterViewタグに当たるもの
ルートタグで使用不可(別タグで囲む)

画面用のコンポーネント

pagesフォルダに格納
ファイル構造がパスになる(ファイルシステムルータ)
ルート => index.vue

リンク生成

NuxtLinkタグ

リンク先をto属性(v-bind:to)で指定
name: ルーティング名

character/characterList.vue
=> character-characterList(ルーティング名)

ルートパラメータ

[ルートパラメータ名].vue

/character/characterDetail/:id
=> character/characterDetail/[id].vue

useRoute()

ルートオブジェクトを取得

paramsプロパティでパラメータをゲット

ルートパラメータのリンク

リンクにparamsを埋め込む

character/characterDetail/[id].vue
=> character-characterDetail-id, params: {id: id}

ルーティングの制御

ルータオブジェクト useRouter()

pushメソッドで指定の場所へ遷移

app.vue

<script setup lang="ts">
//型定義をインポートするときは import type
import type {Character} from "@/interfaces";
//キャラクターリストデータ。
useState<Map<number, Character>>(
  "characterList", //ステート名
  (): Map<number, Character> => { //初期値を生成
    const characterListInit = new Map<number, Character>();
    characterListInit.set(1, {id: 1, name: "ルフィ", bounty: 100000000});
    characterListInit.set(2, {id: 2, name: "ゾロ", bounty: 60000000});
    return characterListInit;
  }
);//characterListでデータの取り出しが可
</script>

<template>
  <header>
    <h1>ワンピース</h1>
  </header>
  <main>
    <NuxtPage/>
  </main>
</template>

<style>
main {
  border: black 5px solid;
  padding: 10px;
}
#breadcrumbs ul li {
  display: inline;
  list-style-type: none;
}
#breadcrumbs ul {
  padding-left: 0px;
}
#breadcrumbs ul li:before {
  content: " > ";
}
#breadcrumbs ul li:first-child:before {
  content: none;
}
</style>

pages/index.vue

<template>
  <h1>TOP</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>TOP</li>
    </ul>
  </nav>
  <section>
    <p>
      <!-- <NuxtLink to="/character/characterList"> -->
      <NuxtLink v-bind:to="{name: 'character-characterList'}">
        キャラクターの設定はこちらから
      </NuxtLink>
    </p>
  </section>
</template>

pages/character/characterList.vue

<script setup lang="ts">
import type {character} from "@/interfaces";

//キャラクターリストをステートから取得。
const characterList = useState<Map<number, Character>>("characterList");
</script>

<template>
  <h1>キャラクター設定</h1>
  <nav id="breadcrumbs">
    <ul>
      <li><NuxtLink v-bind:to="{name: 'index'}">TOP</NuxtLink></li>
      <li>キャラクターリスト</li>
    </ul>
  </nav>
  <section>
    <h2>キャラクターリスト</h2>
    <p>
      追加は<NuxtLink v-bind:to="{name: 'character-characterAdd'}">こちら</NuxtLink>から
    </p>
    <section>
      <ul>
        <li
          v-for="[id, character] in characterList"
          v-bind:key="id">
          <NuxtLink v-bind:to="{name: 'character-characterDetail-id', params: {id: id}}">
            No:{{id}} {{character.name}}
          </NuxtLink>
        </li>
      </ul>
    </section>
  </section>
</template>

pages/character/characterAdd.vue

<script setup lang="ts">
import type {character} from "@/interfaces";

//ルータオブジェクトを取得。
const router = useRouter();
// router.push() => 指定の居場所へ
// router.back() => 履歴上で１つ前の画面

//キャラクターリストをステートから取得。
const characterList = useState<Map<number, Character>>("characterList");
//入力データと同期させるCharacterオブジェクトの用意。
const character: Character = reactive(
  {
    id: 0,
    name: "",
    bounty: 0,
  }
);
//登録ボタンが押された時の処理。
const onAdd = (): void => {
  characterList.value.set(character.id, character);
  router.push({name: "character-characterList"});
};
</script>

<template>
  <h1>キャラクター設定</h1>
  <nav id="breadcrumbs">
    <ul>
      <li><NuxtLink v-bind:to="{name: 'index'}">TOP</NuxtLink></li>
      <li><NuxtLink v-bind:to="{name: 'character-characterList'}">キャラクターリスト</NuxtLink></li>
      <li>キャラクター追加</li>
    </ul>
  </nav>
  <section>
    <h2>キャラクター追加</h2>
    <p>
      情報を入力し、登録ボタンをクリックしてください。
    </p>
    <form v-on:submit.prevent="onAdd">
      <table>
        <tr>
          <td>
            <label for="addId">No:</label>
          </td>
          <td>
            <input type="number" id="addId" v-model.number="character.id" required>
          </td>
        </tr>
        <tr>
          <td>
            <label for="addName">名前：</label>
          </td>
          <td>
            <input type="text" id="addName" v-model="character.name" required>
          </td>
        </tr>
        <tr>
          <td>
            <label for="addBounty">懸賞金：</label>
          </td>
          <td>
            <input type="number" id="addBounty" v-model.number="character.bounty" required>
          </td>
        </tr>
      </table>
      <br>
      <button type="submit">登録</button>
    </form>
  </section>
</template>

pages/character/characterDetail/[id].vue

<script setup lang="ts">
import type {Character} from "@/interfaces";

//ルートオブジェクト(ルートに関する情報を取得)を取得。
const route = useRoute();
// route.name => character-characterDetail-id
// route.path => /character/characterDetail/1
// route.params => { id: 1 }

//キャラクターリストをステートから取得。
const characterList = useState<Map<number, Character>>("characterList");
//キャラクターリストから該当キャラクターを取得。
const character = computed(
  (): Character => {
    const id = Number(route.params.id);
    return characterList.value.get(id) as Character;
  }
);
</script>

<template>
  <h1>キャラクター設定</h1>
  <nav id="breadcrumbs">
    <ul>
      <li><NuxtLink v-bind:to="{name: 'index'}">TOP</NuxtLink></li>
      <li><NuxtLink v-bind:to="{name: 'character-characterList'}">キャラクターリスト</NuxtLink></li>
      <li>キャラクター詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>キャラクター詳細情報</h2>
    <table>
      <tr>
        <td>No：</td>
        <td>{{character.id}}</td>
      </tr>
      <tr>
        <td>名前：</td>
        <td>{{character.name}}</td>
      </tr>
      <tr>
        <td>懸賞金：</td>
        <td>{{character.bounty}}ベリー</td>
      </tr>
    </table>
  </section>
</template>