说明
实现下图效果：
点击 张老师，传参给 TeacherInfo 组件，该组件 获取参数 id 和 name，并显示
params 方式传参
本文通过 params 方式实现
特点： url可以看到参数，RESTful 风格，如下：
http://localhost:8080/#/teacher/teacherInfo/1/张老师
注意：不能用路由 path 跳转
<router-link :to=''> 用 路由的 name，不能用 路由的 path，否则会不好使
与 query 传参相比
只能用 路由的
name，不能用pathurl是 restful 风格
需要修改路由
修改 Teacher.vue 组件
修改 Teacher.vue 组件，该组件是 发送参数 页面
params 传参方式
格式：
<router-link :to="{
//path:'路由path',//关键：不能用 path，否则不好使
name:'路由名字',
params:{ // 关键：params传参
key:value
}
}">...</router-link>
例子：
<router-link :to="{
name:'teacherInfo',
params:{ // 关键：params传参
id:item.id,
name:item.name
}
}">{{item.name}}</router-link>
注意： path: 'teacherInfo/:id/:name' 中的参数 与 <router-link> 中的参数，要匹配，否则页面不显示参数
完整代码
<template>
<div class="app">
<h3>Teacher组件（绿色框）</h3>
<div class="teacher_list">
<div>教师列表（路由传参）</div>
<div v-for="item in datas" :key="item.id" >
<router-link :to="{
name:'teacherInfo',
params:{ // 关键：params传参
id:item.id,
name:item.name
}
}">{{item.name}}</router-link>
</div>
</div>
关键：显示路由组件
<div class="info">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="Teacher">
import {RouterView} from 'vue-router'
const datas =[
{
id:1,
name:'张老师'
},
{
id:2,
name:'李老师'
},
{
id:3,
name:'王老师'
}
]
</script>
<style scoped>
.app{
margin: 0 auto;
width: 500px;
height: 300px;
border: 1px green solid;
}
.teacher_list{
width: 100px;
float:left;
border: 1px blue solid;
}
.info{
float:left;
width:390px;
border: 1px red solid;
}
</style>
创建 TeacherInfo.vue 组件
该组件用于接收参数，显示老师信息
获取 params参数方式
格式：
{{route.params.key}}
例子：
{{route.params.id}}
完整代码
在 views 目录下创建 TeacherInfo.vue 路由组件，内容如下：
<template>
<div>
<h3>TeacherInfo组件（红色框）</h3>
<div>传入参数 id：{{route.params.id}}</div>
<div>传入参数 name：{{route.params.name}}</div>
</div>
</template>
<script lang="ts" setup name="TeacherInfo">
import {useRoute} from 'vue-router'
// 本质hooks
const route = useRoute()
console.log("route:",route)
</script>
<style>
</style>
修改 路由文件
定义路由时，需要在 path 后面加上占位符，表示接收 params 参数，如下：
{
// 必须给路由命名，因为 params 传参，不能通过 path 跳转
name: 'teacherInfo',
// 关键：路由后面加上占位符，:id。注意：<router-link>中的参数要与此参数匹配，否则页面不显示参数
path: 'teacherInfo/:id/:name',
component: teacherInfo,
}
注意：
- 必须给路由命名，因为 params 传参，不能通过 path 跳转（因为 path 会动态改变）
path: 'teacherInfo/:id/:name'中的参数 与<router-link>中的参数，要匹配，否则页面不显示参数
完整代码
修改 src/router/index.js 路由文件，添加 teacherInfo 路由，如下：
// 引入
import {createRouter, createWebHashHistory} from 'vue-router'
//引入组件
import student from '@/views/Student.vue'
import teacher from '@/views/Teacher.vue'
import exam from '@/views/Exam.vue'
import homework from '@/views/Homework.vue'
import teacherInfo from '@/views/TeacherInfo.vue'
// 创建路由器，需要传入 {} 对象
// (一个工程只需要创建一个路由器对象)
const router = createRouter({
history: createWebHashHistory(), // 路由器的工作模式
routes : [ // 注意：是 routes，不是router，其value是数组，数组里面的元素是 {} 对象
{
path: '/',
redirect:'/student'
},
{
path: '/student', //路径，相当于<a>标签的href，关键：必须以 “/” 开头
component: student, //组件
children:[
{
name: 'exam',//关键：路由名字
path: 'exam', //关键：二级路由路径，前面不要加 “/”
component: exam, //组件
},
{
name: 'homework',//关键：路由名字
path: 'homework', //关键：二级路由路径，前面不要加 “/”
component: homework, //组件
}
]
},
{
path: '/teacher', //路径
component: teacher, //组件
children:[
{
// 必须给路由命名，因为 params 传参，不能通过 path 跳转
name: 'teacherInfo',
// 关键：路由后面加上占位符，:id。注意：<router-link>中的参数要与此参数匹配，否则页面不显示参数
path: 'teacherInfo/:id/:name',
// 指定 teacherInfo 组件
component: teacherInfo,
}
]
}
]
})
// 暴露路由，让其他页面可以使用
export default router
总结
