Vue 路由传参的三种方式（三）-171主机测评

Vue 路由传参的三种方式

在 Vue Router 中，路由组件之间传递参数主要有三种方式：query 参数、params 参数和 props 传参。下面分别介绍。

一、query 传参

query 参数会在 URL 中以 ?key=value 的形式出现，例如 /news/rolonews?id=1&skill=后仰跳投。它类似于 GET 请求的查询字符串。

1.1 基本路由配置（index.ts）

{
path: '/news',
name: 'News',
component: News,
children: [
{
path: 'rolonews', // 注意：这里没有占位符，参数通过 query 传递
name: 'Rolonews',
component: Rolonews,
},
],
},

1.2 传递 query 参数的方式

方式一：字符串拼接（直接写在路径中）

<RouterLink to="/news/rolonews?a=666&b=777">{{ rolo.skill }}</RouterLink>

在这里插入图片描述

在 Rolenews.vue 组件中接收参数：

<template>
<p>牛逼666</p>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route); // 打印 route 对象，可以看到 query 属性
</script>

得到：
在这里插入图片描述

方式二：模板字符串拼接

更好的理解：使用动态数据构造路径。

完整的父组件 News.vue（使用 query 传参）

子组件 Rolenews.vue 接收 query 参数

<template>
<p>
编号：{{ route.query.id }}<br />
技能：{{ route.query.skill }}
</p>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route)
</script>

就可以拿到数据了

在这里插入图片描述

方式三：对象写法（推荐，更清晰）

接收时可以使用 toRefs 解构：

<template>
<p>
编号：{{ query.id }}<br />
技能：{{ query.skill }}
</p>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { toRefs } from 'vue'
const route = useRoute()
const { query } = toRefs(route)
</script>

注意：query 参数刷新页面后依然存在（因为它保存在 URL 中），且不需要在路由配置中预先定义。

二、params 传参

params 参数是 URL 路径的一部分，例如 /news/rolenews/1/后仰跳投。需要在路由配置中预定义占位符。

2.1 传递 params 参数

方式一：模板字符串拼接（路径带占位符）

第二步：修改路由配置，添加占位符

{
path: '/news',
name: 'News',
component: News,
children: [
{
path: 'rolenews/:id/:skill', // 冒号表示参数占位符
name: 'Rolenews',
component: Rolenews,
},
],
},

第三步：在子组件中通过 route.params 接收

<template>
<p>
编号：{{ route.params.id }}<br />
技能：{{ route.params.skill }}
</p>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params)
</script>

拿到数据：
在这里插入图片描述

方式二：对象写法（必须使用 name，不能使用 path）

2.2 可选参数

如果想要某个参数可传可不传，在占位符后加问号 ?。

{
path: 'rolenews/:id?/:skill', // id 可选
name: 'Rolenews',
component: Rolenews,
}

此时可以只传 skill：

重要备注：

传递 params 参数时，若使用 to 的对象写法，必须使用 name，不能用 path。

传递 params 参数时，需要提前在路由规则的 path 中用 :paramName 占位。

三、props 传参

props 传参可以让路由组件直接通过 props 接收参数，而不必在组件内部使用 route.params 或 route.query，代码更简洁。

3.1 props 的布尔值写法

作用：将路由收到的所有 params 参数作为 props 传递给路由组件。

第一步：在路由配置中设置 props: true

{
path: '/news',
name: 'News',
component: News,
children: [
{
path: 'rolenews/:id?/:skill',
name: 'Rolenews',
component: Rolenews,
props: true, // 布尔值写法
},
],
},

此时，Rolenews 组件会自动接收 id 和 skill 作为 props。

第二步：在组件中通过 defineProps 声明接收

<template>
<p>
编号：{{ id }}<br />
技能：{{ skill }}
</p>
</template>
<script setup lang="ts">
defineProps(['id', 'skill'])
</script>

注意：props: true 只对 params 参数有效，不能处理 query 参数。

3.2 props 的函数写法

作用：可以自定义返回的 props 对象，灵活性更高。通常用于处理 query 或混合参数。

{
path: '/news',
name: 'News',
component: News,
children: [
{
path: 'rolenews/:id?/:skill',
name: 'Rolenews',
component: Rolenews,
props(route) {
console.log(route) // 打印路由信息
return route.params // 返回 params 参数
}
},
],
},

控制台打印：出路由的信息
在这里插入图片描述

也可以写成箭头函数：

props: (route) => route.params

如果需要处理 query 参数：

props: (route) => ({ id: route.query.id, skill: route.query.skill })

这样在组件中依然可以通过 defineProps 接收。

3.3 props 的对象写法

作用：直接写死一组键值对作为 props 传递给组件。很少使用，因为值是静态写死的，无法动态传递。

{
path: 'rolenews/:id?/:skill',
name: 'Rolenews',
component: Rolenews,
props: {
id: '固定id',
skill: '固定技能',
},
},

总结对比

传参方式URL 表现路由配置要求接收方式刷新后参数是否保留

query	/path?key=value	不需要占位符	route.query.key	是（在URL中）
params	/path/value	需要 :key 占位符	route.params.key	是（在URL中）
props	无特殊表现	配置 props: true 或函数	defineProps 直接接收	取决于底层参数

建议：

普通查询参数（如搜索条件、分页）使用 query。
资源标识（如 ID、用户名）使用 params。
为了组件解耦和可读性，推荐使用 props 传参方式（特别是函数写法）。

Vue 路由传参的三种方式（三）