列表页传参Staff.vue：

<template>
    <div class="staff">
        <main class="container">
            <aside class="sidebar">
                <nav>
                    <ul>
                        <li v-for="staff in staffList" :key="staff.id">
                            <!-- <router-link :to="`/staff/info?id=${staff.id}&name=${staff.name}&age=${staff.age}`" active-class="activeLink">{{ staff.name }}</router-link> -->
                            <router-link :to="{
                                path: '/staff/info',
                                query: {
                                    id: staff.id,
                                    name: staff.name,
                                    age: staff.age
                                }
                            }" active-class="activeLink">
                                {{ staff.name }}
                            </router-link>
                        </li>
                    </ul>
                </nav>
            </aside>
            <section class="content">
                <router-view />
            </section>
        </main>
    </div>
</template>
<script lang='ts' setup name='Staff'>
import { reactive } from 'vue';
// 数据准备
const staffList = reactive([
    { id: "1", name: "张三", age: 22 },
    { id: "2", name: "李四", age: 23 },
    { id: "3", name: "王五", age: 24 }
])
</script>
<style scoped>
.staff {
    background-color: darkslategrey;
}

.container {
    display: flex;
    margin-top: 10px;
}

.sidebar {
    width: 50px;
    color: white;
    box-sizing: border-box;
}

.sidebar nav ul {
    list-style-type: square;
    padding: 0;
}

.sidebar nav ul li {
    margin: 15px 0;
    color: gold;
}

.content {
    flex: 1;
    width: 600px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: #ecf0f1;
}

.activeLink {
    color: white;
}
</style>

有两种跳转传参的写法如下。

URL式：

<router-link 
  :to="`/staff/info?id=${staff.id}&name=${staff.name}&age=${staff.age}`">
  {{ staff.name }}
<router-link>

这种写法太丑，传参多的话，后面跟一大串。这种写法适合传1个参数，例如id这种。

对象式：

<router-link 
  :to="{
    path: '/staff/info',
    query: {
      id: staff.id,
      name: staff.name,
      age: staff.age
    }
  }">{{ staff.name }}</router-link>

之前在路由文件src/router/index.ts里面设置了name，这里可以用path，也可以用name。

详情页取参StaffInfo.vue：

<template>
    <div class="staffInfo">
        <ul>
            <li>主键：{{ query.id }}</li>
            <li>姓名：{{ query.name }}</li>
            <li>年龄：{{ query.age }}</li>
        </ul>
    </div>
</template>
<script lang='ts' setup name='StaffInfo'>
import { toRefs } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const { query } = toRefs(route)
</script>
<style scoped>
.staffInfo {
    background-color: moccasin;
    color: black;
}

ul li {
    list-style-type: none;
    margin-top: 10px;
}
</style>

代码简单，不赘述，注意复习之前讲的hook函数、toRefs。