vue实现路由传参
vue-router 的传参方式
query 传参
通过 URL 的查询参数传递数据，适合非敏感信息。参数会显示在地址栏中，刷新页面后数据不会丢失。
// 跳转时传递参数
this.$router.push({
path: '/target',
query: { id: 123, name: 'foo' }
});
// 目标组件接收参数
this.$route.query.id; // 获取参数params 传参
通过路由的 params 属性传递数据，需在路由配置中定义参数名。刷新页面后数据会丢失，除非搭配动态路由。
// 路由配置
{
path: '/target/:id',
name: 'Target',
component: TargetComponent
}
// 跳转时传递参数
this.$router.push({
name: 'Target',
params: { id: 123 }
});
// 目标组件接收参数
this.$route.params.id; // 获取参数props 解耦
通过路由配置的 props 属性将参数直接注入组件，避免在组件内直接访问 $route，提高可复用性。
// 路由配置
{
path: '/target/:id',
component: TargetComponent,
props: true // 将 params 作为 props 传递
}
// 或通过函数返回自定义 props
props: (route) => ({ id: route.query.id })
// 组件内通过 props 接收
props: ['id'],动态路由传参
适用于需要保持参数状态的场景（如页面刷新后参数仍存在）。需在路由路径中定义参数占位符。
// 路由配置
{
path: '/user/:userId/post/:postId',
component: UserPost
}
// 跳转时传递参数
this.$router.push('/user/123/post/456');
// 组件内通过 $route.params 获取
const { userId, postId } = this.$route.params;注意事项
- query 和 params 区别：
query参数显示在 URL 中，适合公开数据；params更简洁，但需预定义路由。 - props 推荐：对于复杂组件，优先使用
props传参以降低耦合。 - 动态路由：若需持久化参数，选择动态路由搭配
params。
