vue3router传值

在Vue 3中使用Vue Router传递值有几种方法。以下是其中的一些常见方式：

1. 使用路由参数（Route Parameters）：可以通过在路由路径中定义参数，然后在组件中访问这些参数。例如，在路由配置中定义一个参数：

{
  path: '/user/:id',
  component: UserComponent
}

在UserComponent组件中，您可以通过`$route.params`来访问id参数：

export default {
  mounted() {
    const userId = this.$route.params.id;
    // 使用userId进行逻辑处理
  }
}

2. 使用查询参数（Query Parameters）：可以将参数作为查询字符串传递，并在组件中进行访问。例如，定义一个带有查询参数的路由：

{
  path: '/user',
  component: UserComponent
}

然后在链接中添加查询参数：

<router-link :to="{ path: '/user', query: { id: '123' }}">Go to User</router-link>

在UserComponent组件中，您可以通过`$route.query`来访问id参数：

export default {
  mounted() {
    const userId = this.$route.query.id;
    // 使用userId进行逻辑处理
  }
}

3. 使用路由元信息（Route Meta）：可以在路由配置中定义元信息，并在组件中访问它们。例如，在路由配置中定义元信息：

{
  path: '/user',
  component: UserComponent,
  meta: {
    userId: '123'
  }
}

在UserComponent组件中，您可以通过`$route.meta`来访问userId：

export default {
  mounted() {
    const userId = this.$route.meta.userId;
    // 使用userId进行逻辑处理
  }
}

这些是传递值的一些常见方法，您可以根据您的需求选择适合您的情况的方法。