1. 前言

路由跳转并传递参数的应用十分广泛，以下是一些常见的应用场景：

• 商品详情页：当用户在商品列表页点击一个商品时，通常会跳转到该商品的详情页。可以将商品的ID作为参数传递给商品详情页，商品详情页组件就能够根据商品ID获取到商品的详细信息
• 视频详情页：当用户在视频列表页点击一个视频时，通常会跳转到该视频的详情页。可以将视频的ID作为参数传递给视频详情页，视频详情页组件就能够根据视频ID获取到视频的详细信息
• 用户个人资料页：在用户点击查看或编辑个人资料时，路由会跳转到个人资料页，并向个人资料页面传递用户的ID或者其它唯一标识符，个人资料页组件可以根据这个参数来获取用户的个人信息
• 文章阅读页：当用户点击一个文章标题或摘要时，应用会将用户带到文章阅读页。在这个过程中，文章的ID或其他唯一标识符会作为参数传递，文章阅读页组件就可以根据这个参数获取相应的文章内容
• 搜索结果页：用户在搜索框输入关键词后，通常会跳转到搜索结果页。可以将搜索关键词作为参数传递给搜索结果页，页面组件会根据这个参数来请求和展示相关的搜索结果

---

本文主要介绍在Vue3工程（使用 setup 语法）中如何进行路由跳转并传递参数

2. 准备工作

2.1 编写路由规则

在src/router/index.js文件中编写路由规则

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '@/views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'homeView',component: HomeView},{path: '/sourceView',name: 'sourceView',component: () => import('@/views/SourceView.vue')},{path: '/targetView',name: 'targetView',component: () => import('@/views/TargetView.vue')}]
})export default router

2.2 源页面

src/views/SourceView.vue

<template><div><h1>源页面</h1></div>
</template><script setup></script><style scoped></style>

2.3 目标页面

src/views/TargetView.vue

<template><div><h1>目标页面</h1></div>
</template><script setup></script><style scoped></style>

3. 源页面如何传递参数给目标页面

3.1 通过 router-link 标签传递参数（很少使用）

在路径后面添加需要传递的参数，如果需要传递多个参数，多个参数之间用&符号隔开

---

template部分（to属性前面记得加上:）

<router-link :to="`/targetView?username=${username}&gender=${gender}`">跳转到目标页面</router-link>

script部分

const username = ref('zhangsan')
const gender = ref(1)

3.2 通过 js 代码传递参数（经常使用）

template部分

<button @click="jumpToTargetView">跳转到目标页面</button>

script部分

import router from '@/router/index.js'
import {ref} from 'vue'const username = ref('zhangsan')
const gender = ref(1)const jumpToTargetView = () => {router.push({path: '/targetView',query: {username: username.value,gender: gender.value}})
}

4. 目标页面接收源页面传递过来的参数

template部分

用户名：{{ username }}
<hr>
性别：{{ gender }}

script部分（在onMounted钩子函数中编写接收参数的代码）

import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'const route = useRoute()const username = ref('')
const gender = ref(1) // 1男 2女onMounted(() => {username.value = route.query.usernamegender.value = route.query.gender
})

5. 完整的示例代码

src/views/SourceView.vue

<template><div><h1>源页面</h1><!--通过router-link标签跳转--><router-link :to="`/targetView?username=${username}&gender=${gender}`">跳转到目标页面</router-link><!--通过js代码跳转--><button @click="jumpToTargetView">跳转到目标页面</button></div>
</template><script setup>
import router from '@/router/index.js'
import {ref} from 'vue'const username = ref('zhangsan')
const gender = ref(1)const jumpToTargetView = () => {router.push({path: '/targetView',query: {username: username.value,gender: gender.value}})
}</script><style scoped></style>

---

src/views/TargetView.vue

<template><div><h1>目标页面</h1>用户名：{{ username }}<hr>性别：{{ gender }}</div>
</template><script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'const route = useRoute()const username = ref('')
const gender = ref(1) // 1男 2女onMounted(() => {username.value = route.query.usernamegender.value = route.query.gender
})
</script><style scoped></style>