vue3.x教程：路由传参-params方式-马育民老师

# 说明

实现下图效果：

[![](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-10_22-31-51.png)](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-10_22-31-51.png)

点击 `张老师`，传参给 `TeacherInfo` 组件，该组件 **获取参数**  `id` 和 `name`，并显示

# params 方式传参

本文通过 **params** 方式实现

**特点：** url可以看到参数，[RESTful](https://www.malaoshi.top/show_1EF5resN8LL7.html "RESTful") 风格，如下：

```
http://localhost:8080/#/teacher/teacherInfo/1/张老师
```

### 注意：不能用路由 path 跳转

`<router-link :to=''>` 用 路由的 `name`，不能用 路由的 `path`，否则会不好使

# 与 query 传参相比

- 只能用 路由的 `name`，不能用 `path`

- url是 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>

console.log("route:",route)

</script>

# 修改 路由文件

定义路由时，需要在 `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
```

# 总结

[![](/upload/0/0/1IX3Gh9dcjuZ.png)](/upload/0/0/1IX3Gh9dcjuZ.png)

原文出处：http://www.malaoshi.top/show_1GW3mcq0sILm.html