[Vue.js3] 8. Vue Router

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

<script setup lang="ts">
import { reactive, provide } from 'vue'
import { RouterView } from 'vue-router' // 1.
import type { Member } from '@/interfaces' // 2. @はsrcディレクトリを指す

// 3. コンポーネントを複数またいでデータを共有する必要があるので、Provide と inject を利用する。
// 一番の起点となる App.vue で会員リストデータを Provicde しておく。
const memberList = new Map<number, Member>()
memberList.set(33456, {
  id: 33456,
  name: '田中太郎',
  email: 'bou@example.com',
  points: 35,
  note: '初回入会特典あり。',
})
memberList.set(47783, { id: 47783, name: '鈴木二郎', email: 'mue@example.com', points: 53 })
provide('memberList', reactive(memberList))
</script>

<template>
  <!-- 4. ヘッダ -->
  <header>
    <h1>Vue Routerサンプル</h1>
  </header>

  <!-- 5. ルーティング表示領域を囲むタグ <main> -->
  <main>
    <!-- 6. ルーティング表示領域 (使用前にvue-routerからRouterViewをインポートしておく(1.))-->
    <RouterView />
  </main>
</template>

<style>
/* 7. main タグに枠線を表示する設定。 */
main {
  border: blue 1px solid;
  padding: 10px;
}

/* 8. 以下はパンくずリストを表示するための定型スタイル */
#breadcrumbs ul li {
  display: inline;
  list-style-type: none;
}
#breadcrumbs {
  margin-left: 0px;
}
#breadcrumbs ul {
  padding-left: 0px;
}
#breadcrumbs ul .current {
  color: red;
}
#breadcrumbs ul li:before {
  content: ' > ';
}
#breadcrumbs ul li:first-child:before {
  content: none;
}
</style>

<script setup lang="ts">
import { reactive, provide } from 'vue'
import { RouterView } from 'vue-router' // 1.
import type { Member } from '@/interfaces' // 2. @はsrcディレクトリを指す

// 3. コンポーネントを複数またいでデータを共有する必要があるので、Provide と inject を利用する。
// 一番の起点となる App.vue で会員リストデータを Provicde しておく。
const memberList = new Map<number, Member>()
memberList.set(33456, {
  id: 33456,
  name: '田中太郎',
  email: 'bou@example.com',
  points: 35,
  note: '初回入会特典あり。',
})
memberList.set(47783, { id: 47783, name: '鈴木二郎', email: 'mue@example.com', points: 53 })
provide('memberList', reactive(memberList))
</script>

<template>
  <!-- 4. ヘッダ -->
  <header>
    <h1>Vue Routerサンプル</h1>
  </header>

  <!-- 5. ルーティング表示領域を囲むタグ <main> -->
  <main>
    <!-- 6. ルーティング表示領域 (使用前にvue-routerからRouterViewをインポートしておく(1.))-->
    <RouterView />
  </main>
</template>

<style>
/* 7. main タグに枠線を表示する設定。 */
main {
  border: blue 1px solid;
  padding: 10px;
}

/* 8. 以下はパンくずリストを表示するための定型スタイル */
#breadcrumbs ul li {
  display: inline;
  list-style-type: none;
}
#breadcrumbs {
  margin-left: 0px;
}
#breadcrumbs ul {
  padding-left: 0px;
}
#breadcrumbs ul .current {
  color: red;
}
#breadcrumbs ul li:before {
  content: ' > ';
}
#breadcrumbs ul li:first-child:before {
  content: none;
}
</style>

<template>
  <h1>TOP</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>TOP</li>
    </ul>
  </nav>
  <section>
    <p>会員管理はこちら</p>
  </section>
</template>

<template>
  <h1>TOP</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>TOP</li>
    </ul>
  </nav>
  <section>
    <p>会員管理はこちら</p>
  </section>
</template>

<template>
  <h1>会員管理</h1>
  <section>
    <h2>会員リスト</h2>
  </section>
</template>

<template>
  <h1>会員管理</h1>
  <section>
    <h2>会員リスト</h2>
  </section>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { RouterLink } from 'vue-router'
import type { Member } from '@/interfaces'

const memberList = inject('memberList') as Map<number, Member>
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <!-- Top画面に戻るリンク。ReouteLinkタグ構文を利用 -->
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
    </ul>
  </nav>
  <section>
    <h2>会員リスト</h2>
    <section>
      <ul>
        <li v-for="[id, member] in memberList" v-bind:key="id">
          <!-- ルートパラメータの埋め込み。params:{ルートパラメータ名: 値,…} -->
          <RouterLink v-bind:to="{ name: 'MemberDetail', params: { id: id } }">
            IDが{{ id }}の{{ member.name }}さん
          </RouterLink>
        </li>
      </ul>
    </section>
  </section>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { RouterLink } from 'vue-router'
import type { Member } from '@/interfaces'

const memberList = inject('memberList') as Map<number, Member>
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <!-- Top画面に戻るリンク。ReouteLinkタグ構文を利用 -->
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
    </ul>
  </nav>
  <section>
    <h2>会員リスト</h2>
    <section>
      <ul>
        <li v-for="[id, member] in memberList" v-bind:key="id">
          <!-- ルートパラメータの埋め込み。params:{ルートパラメータ名: 値,…} -->
          <RouterLink v-bind:to="{ name: 'MemberDetail', params: { id: id } }">
            IDが{{ id }}の{{ member.name }}さん
          </RouterLink>
        </li>
      </ul>
    </section>
  </section>
</template>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <!-- Top画面に戻るリンク。ReouteLinkタグ構文を利用 -->
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <!-- 会員リスト画面に戻るリンク。ReouteLinkタグ構文を利用 -->
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>会員詳細情報</h2>
  </section>
</template>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <!-- Top画面に戻るリンク。ReouteLinkタグ構文を利用 -->
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <!-- 会員リスト画面に戻るリンク。ReouteLinkタグ構文を利用 -->
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>会員詳細情報</h2>
  </section>
</template>

<script setup lang="ts">
import { inject, computed } from 'vue'
import { RouterLink } from 'vue-router'
import type { Member } from '@/interfaces'

// Props定義を行うだけで、そのPropsに自動的にルートパラメータが格納される。
interface Props {  // 1.
  id: number
}
const props = defineProps<Props>()

const memberList = inject('memberList') as Map<number, Member>
const member = computed((): Member => {
  return memberList.get(props.id) as Member
})
const localNode = computed((): string => {
  let localNote = '---'
  if (member.value.note != undefined) {
    localNote = member.value.note
  }
  return localNote
})
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>会員詳細情報</h2>
    <dl>
      <dt>ID</dt>
      <dd>{{ member.id }}</dd>
      <dt>名前</dt>
      <dd>{{ member.name }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ member.email }}</dd>
      <dt>備考</dt>
      <dd>{{ localNode }}</dd>
    </dl>
  </section>
</template>

<script setup lang="ts">
import { inject, computed } from 'vue'
import { RouterLink } from 'vue-router'
import type { Member } from '@/interfaces'

// Props定義を行うだけで、そのPropsに自動的にルートパラメータが格納される。
interface Props {  // 1.
  id: number
}
const props = defineProps<Props>()

const memberList = inject('memberList') as Map<number, Member>
const member = computed((): Member => {
  return memberList.get(props.id) as Member
})
const localNode = computed((): string => {
  let localNote = '---'
  if (member.value.note != undefined) {
    localNote = member.value.note
  }
  return localNote
})
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>会員詳細情報</h2>
    <dl>
      <dt>ID</dt>
      <dd>{{ member.id }}</dd>
      <dt>名前</dt>
      <dd>{{ member.name }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ member.email }}</dd>
      <dt>備考</dt>
      <dd>{{ localNode }}</dd>
    </dl>
  </section>
</template>

<script setup lang="ts">
import { inject, reactive } from 'vue'
import { RouterLink, useRouter } from 'vue-router' // 1. userRouterをインポート
import type { Member } from '@/interfaces'

const router = useRouter() // 2. Ruterオブジェクトを取得する関数
const memberList = inject('memberList') as Map<number, Member> // 3.Inject

// 4. リアクティブなMemberオブジェクトを用意
const member: Member = reactive({
  id: 0,
  name: '',
  email: '',
  points: 0,
  note: '',
})

// 5. [登録]ボタンクリックで呼び出されるメソッド
const onAdd = (): void => {
  console.log(member)
  memberList.set(member.id, member) // 6. Memberオブジェクトを追加
  router.push({ name: 'MemberList' }) // 7. リスト画面に遷移
}
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> AppTop </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員情報追加</li>
    </ul>
  </nav>
  <section>
    <h2>会員情報追加</h2>
    <p>情報を入力し、登録ボタンをクリックしてください。</p>

    <!-- 8. required属性による入力チェックやinput要素のnumberタイプやemailタイプによる -->
    <!--    入力チェックを有効にするため、ボタンのタイプをsubmitにしている。            -->
    <!--    イベント処理はfrom の v-on:submit で行っているので、buttonのsubmitを      -->
    <!--    キャンセルするために .prevent修飾子を利用している。                       -->
    <form v-on:submit.prevent="onAdd">
      <!-- 9. 各プロパティと入力コントロールはそれぞれのタグにあるようにv-modelで同期されている -->
      <dl>
        <dt><label for="addId">ID </label></dt>
        <dd><input type="number" id="addId" v-model.number="member.id" required /></dd>
        <dt><lavel for="addName">名前 </lavel></dt>
        <dd><input type="text" id="addName" v-model="member.name" required /></dd>
        <dt><lavel for="addEmail">メールアドレス </lavel></dt>
        <dd><input type="email" id="addEmail" v-model="member.email" required /></dd>
        <dt><lavel for="addPoints">保有ポイント </lavel></dt>
        <dd><input type="number" id="addPoints" v-model="member.points" required /></dd>
        <dt><lavel for="addNote">備考 </lavel></dt>
        <dd><textarea id="addNote" v-model="member.note" required></textarea></dd>
      </dl>
      <button type="submit">登録</button>
    </form>
  </section>
</template>

<script setup lang="ts">
import { inject, reactive } from 'vue'
import { RouterLink, useRouter } from 'vue-router' // 1. userRouterをインポート
import type { Member } from '@/interfaces'

const router = useRouter() // 2. Ruterオブジェクトを取得する関数
const memberList = inject('memberList') as Map<number, Member> // 3.Inject

// 4. リアクティブなMemberオブジェクトを用意
const member: Member = reactive({
  id: 0,
  name: '',
  email: '',
  points: 0,
  note: '',
})

// 5. [登録]ボタンクリックで呼び出されるメソッド
const onAdd = (): void => {
  console.log(member)
  memberList.set(member.id, member) // 6. Memberオブジェクトを追加
  router.push({ name: 'MemberList' }) // 7. リスト画面に遷移
}
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> AppTop </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員情報追加</li>
    </ul>
  </nav>
  <section>
    <h2>会員情報追加</h2>
    <p>情報を入力し、登録ボタンをクリックしてください。</p>

    <!-- 8. required属性による入力チェックやinput要素のnumberタイプやemailタイプによる -->
    <!--    入力チェックを有効にするため、ボタンのタイプをsubmitにしている。            -->
    <!--    イベント処理はfrom の v-on:submit で行っているので、buttonのsubmitを      -->
    <!--    キャンセルするために .prevent修飾子を利用している。                       -->
    <form v-on:submit.prevent="onAdd">
      <!-- 9. 各プロパティと入力コントロールはそれぞれのタグにあるようにv-modelで同期されている -->
      <dl>
        <dt><label for="addId">ID </label></dt>
        <dd><input type="number" id="addId" v-model.number="member.id" required /></dd>
        <dt><lavel for="addName">名前 </lavel></dt>
        <dd><input type="text" id="addName" v-model="member.name" required /></dd>
        <dt><lavel for="addEmail">メールアドレス </lavel></dt>
        <dd><input type="email" id="addEmail" v-model="member.email" required /></dd>
        <dt><lavel for="addPoints">保有ポイント </lavel></dt>
        <dd><input type="number" id="addPoints" v-model="member.points" required /></dd>
        <dt><lavel for="addNote">備考 </lavel></dt>
        <dd><textarea id="addNote" v-model="member.note" required></textarea></dd>
      </dl>
      <button type="submit">登録</button>
    </form>
  </section>
</template>

<script setup lang="ts">
import { inject, ref , computed, watchEffect } from 'vue'
import { RouterLink, useRoute} from 'vue-router'  // 1.useRoute関数利用
import type { Member } from '@/interfaces'

/*
interface Props {
  id: number
}
const props = defineProps<Props>()
const memberList = inject('memberList') as Map<number, Member>
const member = computed((): Member => {
  return memberList.get(props.id) as Member
})
*/
// ルートパラメータを取得
// useRoute()関数で取得したオブジェクトを利用する
const route = useRoute()
let id = Number(route.params.id)  // パラメータを取得

// Provideされたデータをinject
const memberList = inject('memberList') as Map<number, Member>
const member = ref(memberList.get(id) as Member)  // idに対応するデータを取得

const localNode = computed((): string => {
  let localNote = '---'
  if (member.value.note != undefined) {
    localNote = member.value.note
  }
  return localNote
})

</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>会員詳細情報</h2>
    <dl>
      <dt>ID</dt>
      <dd>{{ member.id }}</dd>
      <dt>名前</dt>
      <dd>{{ member.name }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ member.email }}</dd>
      <dt>備考</dt>
      <dd>{{ localNode }}</dd>
    </dl>
  </section>
</template>

<script setup lang="ts">
import { inject, ref , computed, watchEffect } from 'vue'
import { RouterLink, useRoute} from 'vue-router'  // 1.useRoute関数利用
import type { Member } from '@/interfaces'

/*
interface Props {
  id: number
}
const props = defineProps<Props>()
const memberList = inject('memberList') as Map<number, Member>
const member = computed((): Member => {
  return memberList.get(props.id) as Member
})
*/
// ルートパラメータを取得
// useRoute()関数で取得したオブジェクトを利用する
const route = useRoute()
let id = Number(route.params.id)  // パラメータを取得

// Provideされたデータをinject
const memberList = inject('memberList') as Map<number, Member>
const member = ref(memberList.get(id) as Member)  // idに対応するデータを取得

const localNode = computed((): string => {
  let localNote = '---'
  if (member.value.note != undefined) {
    localNote = member.value.note
  }
  return localNote
})

</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員詳細情報</li>
    </ul>
  </nav>
  <section>
    <h2>会員詳細情報</h2>
    <dl>
      <dt>ID</dt>
      <dd>{{ member.id }}</dd>
      <dt>名前</dt>
      <dd>{{ member.name }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ member.email }}</dd>
      <dt>備考</dt>
      <dd>{{ localNode }}</dd>
    </dl>
  </section>
</template>

<script setup lang="ts">
import { inject, ref, computed, watch } from 'vue'  // watchを利用
import { RouterLink, useRoute, useRouter } from 'vue-router'
import type { Member } from '@/interfaces'

const route = useRoute()    // ルートパラメータを取得
const router = useRouter()  // 保存後に一覧に戻るなどの画面遷移用
const memberList = inject('memberList') as Map<number, Member>

// 1. 画面の入力フォームと同期する「編集用の状態」を用意
const memberForm = ref<Member>({
  id: 0,
  name: '',
  email: '',
  points: 0,
  note: ''
})

// 2. watch を使い、URLのIDが変わった時だけマスターデータから編集用コピーを作成
// ・第１引数はリアクティブなオブジェクトを渡すルール
//   route.params.idはただの値となるので、アロー関数で包んで渡す。
//   vueは「値が変わったかどうかを調べる時に毎回この関数を実行して最新の値を
//   チェックすればいいんだな」と理解する。
// ・第２引数は、newIdで新しい値を受け取っている
watch(
  () => route.params.id,
  (newId) => {
    const id = Number(newId)
    const masterData = memberList.get(id)
    
    if (masterData) {
      // 参照を切り離すためにオブジェクトをコピー（シャローコピー）
      memberForm.value = { ...masterData }
    }
  },
  { immediate: true } // コンポーネント読み込み時にも実行
)

// 3. 備考の表示用算出プロパティ（memberForm を参照するように変更）
const localNote = computed((): string => {
  return memberForm.value.note && memberForm.value.note.trim() !== '' 
    ? memberForm.value.note 
    : '---'
})

// 4. 保存ボタンが押された時の処理
const onSave = () => {
  // inject された Map オブジェクトを直接更新（リアクティブに変更が伝播します）
  memberList.set(memberForm.value.id, { ...memberForm.value })
  alert('変更を保存しました')
  
  // 必要に応じて保存後に一覧画面へ戻す場合
  router.push({ name: 'MemberList' })
}
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員編集</li>
    </ul>
  </nav>
  
  <section>
    <h2>会員詳細情報（編集）</h2>
    <!-- submit.prevent でリロードを防ぎ、保存処理を実行 -->
    <form @submit.prevent="onSave">
      <dl>
        <dt>ID</dt>
        <!-- IDは変更できないように readonly に設定 -->
        <dd>{{ memberForm.id }}</dd>
        
        <dt><label for="edit-name">名前</label></dt>
        <dd>
          <input id="edit-name" type="text" v-model="memberForm.name" required />
        </dd>
        
        <dt><label for="edit-email">メールアドレス</label></dt>
        <dd>
          <input id="edit-email" type="email" v-model="memberForm.email" required />
        </dd>
        
        <dt><label for="edit-points">ポイント</label></dt>
        <dd>
          <input id="edit-points" type="number" v-model.number="memberForm.points" required />
        </dd>
        
        <dt><label for="edit-note">備考</label></dt>
        <dd>
          <textarea id="edit-note" v-model="memberForm.note"></textarea>
          <p class="note-preview">現在のプレビュー: {{ localNote }}</p>
        </dd>
      </dl>
      
      <div class="actions">
        <button type="submit">保存する</button>
        <RouterLink v-bind:to="{ name: 'MemberList' }" class="btn-cancel">キャンセル</RouterLink>
      </div>
    </form>
  </section>
</template>

<style scoped>
/* スタイル調整（必要に応じて追加・変更してください） */
dl dt {
  font-weight: bold;
  margin-top: 10px;
}
input, textarea {
  width: 100%;
  max-width: 400px;
  padding: 6px;
  box-sizing: border-box;
}
textarea {
  height: 80px;
}
.note-preview {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}
.actions {
  margin-top: 20px;
}
button {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.btn-cancel {
  display: inline-block;
  padding: 8px 16px;
  background: #eee;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}
</style>

<script setup lang="ts">
import { inject, ref, computed, watch } from 'vue'  // watchを利用
import { RouterLink, useRoute, useRouter } from 'vue-router'
import type { Member } from '@/interfaces'

const route = useRoute()    // ルートパラメータを取得
const router = useRouter()  // 保存後に一覧に戻るなどの画面遷移用
const memberList = inject('memberList') as Map<number, Member>

// 1. 画面の入力フォームと同期する「編集用の状態」を用意
const memberForm = ref<Member>({
  id: 0,
  name: '',
  email: '',
  points: 0,
  note: ''
})

// 2. watch を使い、URLのIDが変わった時だけマスターデータから編集用コピーを作成
// ・第１引数はリアクティブなオブジェクトを渡すルール
//   route.params.idはただの値となるので、アロー関数で包んで渡す。
//   vueは「値が変わったかどうかを調べる時に毎回この関数を実行して最新の値を
//   チェックすればいいんだな」と理解する。
// ・第２引数は、newIdで新しい値を受け取っている
watch(
  () => route.params.id,
  (newId) => {
    const id = Number(newId)
    const masterData = memberList.get(id)
    
    if (masterData) {
      // 参照を切り離すためにオブジェクトをコピー（シャローコピー）
      memberForm.value = { ...masterData }
    }
  },
  { immediate: true } // コンポーネント読み込み時にも実行
)

// 3. 備考の表示用算出プロパティ（memberForm を参照するように変更）
const localNote = computed((): string => {
  return memberForm.value.note && memberForm.value.note.trim() !== '' 
    ? memberForm.value.note 
    : '---'
})

// 4. 保存ボタンが押された時の処理
const onSave = () => {
  // inject された Map オブジェクトを直接更新（リアクティブに変更が伝播します）
  memberList.set(memberForm.value.id, { ...memberForm.value })
  alert('変更を保存しました')
  
  // 必要に応じて保存後に一覧画面へ戻す場合
  router.push({ name: 'MemberList' })
}
</script>

<template>
  <h1>会員管理</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>
        <RouterLink v-bind:to="{ name: 'AppTop' }"> TOP </RouterLink>
      </li>
      <li>
        <RouterLink v-bind:to="{ name: 'MemberList' }"> 会員リスト </RouterLink>
      </li>
      <li>会員編集</li>
    </ul>
  </nav>
  
  <section>
    <h2>会員詳細情報（編集）</h2>
    <!-- submit.prevent でリロードを防ぎ、保存処理を実行 -->
    <form @submit.prevent="onSave">
      <dl>
        <dt>ID</dt>
        <!-- IDは変更できないように readonly に設定 -->
        <dd>{{ memberForm.id }}</dd>
        
        <dt><label for="edit-name">名前</label></dt>
        <dd>
          <input id="edit-name" type="text" v-model="memberForm.name" required />
        </dd>
        
        <dt><label for="edit-email">メールアドレス</label></dt>
        <dd>
          <input id="edit-email" type="email" v-model="memberForm.email" required />
        </dd>
        
        <dt><label for="edit-points">ポイント</label></dt>
        <dd>
          <input id="edit-points" type="number" v-model.number="memberForm.points" required />
        </dd>
        
        <dt><label for="edit-note">備考</label></dt>
        <dd>
          <textarea id="edit-note" v-model="memberForm.note"></textarea>
          <p class="note-preview">現在のプレビュー: {{ localNote }}</p>
        </dd>
      </dl>
      
      <div class="actions">
        <button type="submit">保存する</button>
        <RouterLink v-bind:to="{ name: 'MemberList' }" class="btn-cancel">キャンセル</RouterLink>
      </div>
    </form>
  </section>
</template>

<style scoped>
/* スタイル調整（必要に応じて追加・変更してください） */
dl dt {
  font-weight: bold;
  margin-top: 10px;
}
input, textarea {
  width: 100%;
  max-width: 400px;
  padding: 6px;
  box-sizing: border-box;
}
textarea {
  height: 80px;
}
.note-preview {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}
.actions {
  margin-top: 20px;
}
button {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.btn-cancel {
  display: inline-block;
  padding: 8px 16px;
  background: #eee;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}
</style>

<template>
    <h1>TOP</h1>
    <section>
        <p>メインコンテンツです。</p>
    </section>
</template>

<template>
    <h1>TOP</h1>
    <section>
        <p>メインコンテンツです。</p>
    </section>
</template>

<template>
    <p>サブコンテンツです。</p>
</template>

<template>
    <p>サブコンテンツです。</p>
</template>