Vue 路由传参的三种方式（三）-编程阁

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>

得到：

方式二：模板字符串拼接

<RouterLink :to="`/news/rolonews?id=${rolo.id}&skill=${rolo.skill}`"> {{ rolo.rolo }} </RouterLink>

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

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

<template> <div class="news"> <ul> <li v-for="rolo in roloList" :key="rolo.id"> <RouterLink :to="`/news/rolonews?id=${rolo.id}&skill=${rolo.skill}`"> {{ rolo.rolo }} </RouterLink> </li> </ul> <div class="news-content"> <RouterView></RouterView> </div> </div> </template> <script setup lang="ts" name="News"> import { reactive } from 'vue' import { RouterView } from 'vue-router' const roloList = reactive([ { id: 1, rolo: '老大', skill: '后仰跳投' }, { id: 2, rolo: '库里', skill: 'logo三分' }, { id: 3, rolo: '詹姆斯', skill: '罚球线暴扣' }, ]) </script> <style scoped> /* 样式略 */ </style>

子组件 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>

就可以拿到数据了

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

<RouterLink :to="{ path: '/news/rolenews', query: { id: role.id, skill: role.skill } }"> {{ role.role }} </RouterLink>

接收时可以使用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 参数

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

<RouterLink :to="`/news/rolenews/${role.id}/${role.skill}`"> {{ role.role }} </RouterLink>

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

{ 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`）

<RouterLink :to="{ name: 'Rolenews', params: { id: role.id, skill: role.skill } }"> {{ role.role }} </RouterLink>

2.2 可选参数

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

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

此时可以只传skill：

<RouterLink :to="{ name: 'Rolenews', params: { skill: role.skill } }"> {{ role.role }} </RouterLink>

重要备注：

传递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 路由传参的三种方式（三）