路由攜帶參數跳轉到目標頁面后，頁面組件可以接收到攜帶傳入的參數，接收的方式與攜帶的方式相關，如果是采用查詢字符串方式攜帶，那么可以通過路由中的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