跳转传参有几种方式

在Vue Router中，实现路由跳转并传参有以下几种方式：

1. 路由参数（Route Params）： 可以通过在路由配置中定义动态的占位符（即路由参数），并在跳转时通过URL路径来传递参数。这种方式适用于需要将参数直接嵌入到URL路径中的情况。

示例代码：

// 路由配置
{
  path: '/user/:id',
  component: UserComponent
}
// 跳转并传参
this.$router.push('/user/123');

javascript复制代码

// 路由配置 { path: '/user/:id', component: UserComponent } // 跳转并传参 this.$router.push('/user/123');

2. 查询参数（Query Params）： 可以通过在URL后面添加查询字符串的方式来传递参数。这种方式适用于需要传递多个参数或者参数不直接嵌入URL路径中的情况。

示例代码：

// 跳转并传参
this.$router.push({ path: '/user', query: { id: 123 }});

javascript复制代码

// 跳转并传参 this.$router.push({ path: '/user', query: { id: 123 }});

3. 命名路由传参： 如果在路由配置中给路由设置了名称（name），则可以使用命名路由来传递参数。这种方式适用于需要在不同组件之间传递参数的情况。

示例代码：

// 路由配置
{
  name: 'user',
  path: '/user',
  component: UserComponent
}
// 跳转并传参
this.$router.push({ name: 'user', params: { id: 123 }});

javascript复制代码

// 路由配置 { name: 'user', path: '/user', component: UserComponent } // 跳转并传参 this.$router.push({ name: 'user', params: { id: 123 }});

4. props传参： 除了上述方式，还可以通过在路由配置中设置props属性来传递参数。这种方式适用于需要将参数作为组件的props属性传递的情况。

示例代码：

// 路由配置
{
  path: '/user',
  component: UserComponent,
  props: { id: 123 }
}
// 跳转
this.$router.push('/user');

javascript复制代码

// 路由配置 { path: '/user', component: UserComponent, props: { id: 123 } } // 跳转 this.$router.push('/user');

以上是Vue Router中跳转传参的几种常见方式。根据具体的需求和场景，选择合适的方式来进行路由跳转并传递参数。