一、query传参
编程式导航 使用router.push 或者 router.replace 的时候，改为对象形式新增query 必须传入一个对象
import {
useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
path: '/info',
query: item
})
}
接受参数
使用 useRoute 的 query
<template>
<div>
<div>ID：{
{route.query?.id}}</div>
<div>名称：{
{route.query?.name}}</div>
<div>价格：{
{route.query?.price}}</div>
</div>
</template>
<script setup lang='ts'>
import {
useRoute } from 'vue-router';
...
const route = useRoute()
</script>
<style lang='less' scoped>
</style>
二、params传参
编程式导航 使用router.push 或者 router.replace 的时候，改为对象形式并且只能使用name，path无效，然后传入params
import {
useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
name: 'Info',
params: item
})
}
接受参数
使用 useRoute 的 params
<template>
<div>
<div>ID：{
{route.params?.id}}</div>
<div>名称：{
{route.params?.name}}</div>
<div>价格：{
{route.params?.price}}</div>
</div>
</template>
<script setup lang='ts'>
import {
useRoute } from 'vue-router';
...
const route = useRoute()
</script>
<style lang='less' scoped>
</style>
三、动态传参
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。
例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数
// router.ts
import {
createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [{
path: '/',
name: 'table',
component: () => import('@/view/Table/index.vue')
}, {
path: '/info/:id',
name: 'Info',
component: () => import('@/view/Table/info.vue')
},
...
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
import {
useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
name: 'Info',
params: {
id: item.id}
})
}
接受参数
使用 useRoute 的 params
<template>
<div>
<div>ID：{
{ item?.id }}</div>
<div>名称：{
{ item?.name }}</div>
<div>价格：{
{ item?.price }}</div>
</div>
</template>
<script setup lang='ts'>
import {
useRoute } from 'vue-router';
import {
data } from './data.json'
...
const route = useRoute()
// 模拟根据id获取数据
const item = data.find(v => v.id === Number(route.params.id))
</script>
<style lang='less' scoped>
</style>
四、query传参和params传参的区别
query传参配置的是path，而params传参配置的是name，且在 params中配置 path 无效query传递的参数会显示在地址栏中，而params传参不会query传参刷新页面数据不会消失，而params传参刷新页面数据回消失params可以使用动态传参，动态传参的数据会显示在地址栏中，且刷新页面不会消失，因此可以使用动态params传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失