当前位置：首页 > VUE

vue实现路由传参

2026-01-21 08:26:22VUE

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;