web250825/vue3/project4/src/views/List.vue

<template>
  <div>
    <h1>列表</h1>
    <!-- 声明式导航 -->
    <!-- <RouterLink to="/list/demo1">第一个</RouterLink>
    <RouterLink to="/list/demo2">第二个</RouterLink> -->
    <h2>导航栏</h2>
    <ul>
      <!-- <li v-for="(item) in list" :key="item.id">
        <RouterLink :to="`/list/demo1?id=${item.id}&user=${item.name}&sex=${item.sex}`">{{ item.name }}</RouterLink>
      </li> -->
      <li v-for="(item) in list" :key="item.id">
        <RouterLink :to="{
          name:'dier',
          query:{
            id:item.id,
            user:item.name,
            sex:item.sex
          }
        }">{{ item.name }}</RouterLink>
      </li>
    </ul>
    <div id="main">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue" 
import { RouterView,RouterLink } from "vue-router";
import { nanoid } from "nanoid";
// interface
let list = reactive([
  {
    id:nanoid(10),
    name:'孙悟空',
    sex:'男'
  },
  {
    id:nanoid(10),
    name:'猪八戒',
    sex:'男'
  },
  {
    id:nanoid(10),
    name:'娜娜子',
    sex:'女'
  },
  {
    id:nanoid(10),
    name:'小爱',
    sex:'女'
  },
  {
    id:nanoid(10),
    name:'图图',
    sex:'男'
  },
  {
    id:nanoid(10),
    name:'美羊羊',
    sex:'女'
  },
])
</script>

<style lang="scss" scoped>
</style>