【Nuxt3】ネストルーティングがうまくできない
Nuxt3のネストルーティングがうまくできない
https://gihyo.jp/book/2023/978-4-297-13685-7
上記のNuxt 3 フロントエンド開発の教科書を読みながらNuxtを勉強しています
内容が2023年と古く、公式サイトやAiを駆使して書き換えつつ進めています
NuxtpageがあるページでNuxtLinkでNuxtPage部分をネストルーティングしたいのですがページ遷移してしまいます
本とはツリー構造や命名をすこし変えています
#pj>pages>member>index.vue
<script setup lang="ts">
import { useMemberStore } from '~/stores/member'
const { memberList } = useMemberStore()
</script>
<template>
<h1>会員管理</h1>
<nav id="breadcrumbs">
<ul>
<li>TOP</li>
<li>会員リスト</li>
</ul>
</nav>
<section>
<h2>会員リスト</h2>
<p>
<NuxtLink :to="{ name: 'member-memberlist-memberadd' }">新規会員登録はこちらから</NuxtLink>
</p>
<section>
<ul>
<li v-for="([id, member]) in memberList.entries()" :key="id">
<NuxtLink :to="`/member/memberlist/${id}`">
IDが{{ id }}の{{ member.name }}さん
</NuxtLink>
</li>
</ul>
</section>
<NuxtPage />
</section>
</template>
ツリー構造
pages
├── member
│ ├── memberlist
│ │ ├── [id].vue
│ │ ├── index.vue
│ │ └── memberadd.vue
│ └── index.vue
└── index.vue
自分で試したこと
#ファイルの名前の変更
[id].vueを[id]/index.vueに変更
#パスの変更
<NuxtLink :to="{ name: 'member-memberlist-memberadd' }">新規会員登録はこちらから</NuxtLink>
ではなく
<NuxtLink :to="{ name: 'member-memberadd' }">新規会員登録はこちらから</NuxtLink>
上記以外にもディレクトリ構造修正しましたがずっとページ遷移のままです
初歩的な質問で申し訳ございませんが
ご回答いただける方がいましたらどうぞよろしくお願いいたします。
0 likes
