vue-router传参方式

Vue-router传参方式有以下几种：

1. 路由路径中传参

可以在路由路径中携带参数，例如：

// 定义路由
{
  path: '/user/:id',
  component: User
}

// 传参
<router-link :to="'/user/' + userId">User</router-link>

这里的`:id`表示动态参数，可以在组件内通过`this.$route.params.id`获取到传递的参数。

2. 查询参数传参

可以使用查询参数传递参数，例如：

// 定义路由
{
  path: '/user',
  component: User
}

// 传参
<router-link :to="{ path: '/user', query: { id: userId }}">User</router-link>

这里的`query`表示查询参数，可以在组件内通过`this.$route.query.id`获取到传递的参数。

3. 命名路由传参

可以使用命名路由来传递参数，例如：

// 定义路由
{
  path: '/user/:id',
  name: 'user',
  component: User
}

// 传参
<router-link :to="{ name: 'user', params: { id: userId }}">User</router-link>

这里的`name`表示命名路由的名称，可以在组件内通过`this.$route.params.id`获取到传递的参数。

4. props传参

可以通过props选项来传递参数，例如：

// 定义路由
{
  path: '/user',
  component: User,
  props: true
}

// 传参
<router-link :to="{ path: '/user', props: { userId: userId }}">User</router-link>

这里的`props`表示是否将路由参数映射到组件的props属性中，可以在组件内通过`this.userId`获取到传递的参数。注意，需要在组件内声明props属性才能使用这种方式传参。