vue3 路由组件多数据传参

Vue3 中通过路由组件传递多个参数
在 Vue Router 的配置中，可以利用 params 对象来向目标路由传递多个参数。下面展示一种方式，在定义路由时指定名称，并使用 $router.push() 方法携带多于一个的参数。
当需要发送数据到另一个页面或组件时，可以在调用此函数的时候构建一个包含所需键值对的对象作为参数列表的一部分：
this.$router.push({
name: "admin",
params: {
id: item.id,
title: item.title,
description: item.description // 增加更多字段用于传输更多信息
}
});
登录后复制
对于接收端而言，则继续沿用 .params 属性访问这些传入的数据项[^1]：
// 获取传递过来的所有参数
const id = this.$route.params.id;
const title = this.$route.params.title;
const description = this.$route.params.description;

console.log(`ID is ${id}, Title is ${title}, Description is ${description}`);
登录后复制
需要注意的是，如果希望某些特定类型的查询字符串形式呈现出来的话（即 URL 后面跟问号后面跟着 key=value 形式的部分），则应该改用 query 参数而非 route parameters 来完成同样的功能；而上述例子适用于想要保持 URL 清晰简洁的情况下进行内部状态管理的情况。
另外值得注意的一点是在实际开发过程中可能还会遇到一些特殊情况比如懒加载等场景下可能会涉及到更复杂的逻辑处理但是这里为了简化说明只讨论最基础也是最常见的几种情况[^2]。
最后提醒一点就是确保所使用的版本支持相应特性以及查阅官方文档获取最新指导信息以便更好地解决问题[^3]。