路由携带参数跳转到目标页面后，页面组件可以接收到携带传入的参数，接收的方式与携带的方式相关，如果是采用查询字符串方式携带，那么可以通过路由中的query对象获取到参数，如果是其他方式，通常都是通过路由中的params对象获取。

接下来通过一个实例来演示参数传输和接收实现的过程。

1. 功能描述

新建两个组件，一个用于显示学生列表，对应路由“/stulist”，另一个用于显示学生详细信息，对应路由“/dispstu/:id”，其中id为学生的id号，在学生列表中，当点击姓名时，获取这个id号，并传递到详细页，详细页接收这个id值，并显示对应的学生信息。

2. 实现代码

在项目的views文件夹中，添加一个名为“stuList”的.vue文件，该文件的保存路径是“views/ch8/”，在文件中加入如清单8-8所示代码。

代码清单8-8 stuList.vue代码

<template><ul><li @click="push(stu.id)" v-for="(stu, index) in stus" :key="index">{{ stu.name }}</li></ul>
</template>
<script>
import { useRouter } from "vue-router";
export default {name: "stuList",data() {return {router: useRouter(),stus: [{ id: 10101, name: "张立清" },{ id: 10102, name: "李明明" },{ id: 10103, name: "陈小欢" }]}},methods: {push(id) {this.router.push({name: "dispstu",params: {id: id}})}}
}
</script>
<style scoped>
ul li {cursor: pointer;
}
</style>

除显示学生列表信息外，当在列表中点击姓名后，将携带学生的id值进入到学生详细信息页，它的代码如清单8-9所示。

代码清单8-9 dispStu.vue代码

<template><h3>{{ curStu[0].name }}</h3><div>{{ curStu[0].sex }},{{ curStu[0].score }}分</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {name: "dispStu",data() {return {router: useRouter(),stus: [{ id: 10101, name: "张立清", sex: "男", score: 70 },{ id: 10102, name: "李明明", 
sex: "女", score: 80 },{ id: 10103, name: "陈小欢", 
sex: "女", score: 90 }],curStu: [{name: "",sex: "",score: ""}]}},mounted() {// 获取传入的参数let _id = this.router.currentRoute.params.id;// 根据id获取用户this.curStu = this.stus.filter(item => item.id == _id);}
}
</script>

此外，由于新增加了两个组件，需要在原有路由配置文件中，再添加这两个组件所对应的URL地址，因此，需要向router文件夹下的index.js中，添加代码如清单8-10所示：

代码清单8-10 index.js增加的代码

  ...省略其余代码
{path: '/stulist',name: 'stulist',component: () => import('../views/ch8/stuList.vue')},{path: '/dispstu/:id',name: 'dispstu',component: () => import('../views/ch8/dispStu.vue')}...省略其余代码

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图8-3所示。

4. 源码分析

在本示例源码中，为了确保点击学生列表姓名时，可以携带id值进行跳转，配置路由时，必须在path属性中声明一个变量，通过这个变量才能携带值进行跳转，而在目标页中，通过访问当前的router对象，再访问params对象获取到该变量值，如下代码所示：

  this.router.currentRoute.params.id

注意：如果是通过URL中的查询字符串方式传参，目标页在获取参数时，只能通过访问当前router对象中的query对象获取到传入的参数，代码如下所示：

 this.router.currentRoute.query.id