vue router 传参方式

在 Vue Router 中，有几种常用的传参方式：

1. 路由路径参数（Dynamic Route Matching）：
可以在路由路径中定义参数，使用冒号 `:` 来标识参数。例如：

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

在上述例子中，`:id` 是一个参数，当用户访问 `/user/123` 时，参数值为 `123`，可以在组件内通过 `$route.params.id` 来获取传递的参数。

2. 查询参数（Query Parameters）：
可以在路由中使用查询参数传递数据。例如：

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

当用户访问 `/user?id=123` 时，可以在组件内通过 `$route.query.id` 来获取传递的参数。

3. 命名路由（Named Routes）：
在定义路由时，可以为路由指定一个名称，然后使用 `$router.push` 或者 `<router-link>` 来跳转，并传递参数。例如：

   {
     path: '/user/:id',
     name: 'user',
     component: User,
   }

在组件内可以使用以下方式进行跳转并传递参数：

   // 使用 $router.push
   this.$router.push({ name: 'user', params: { id: 123 } });

   // 使用 <router-link>
   <router-link :to="{ name: 'user', params: { id: 123 } }">Go to User</router-link>

在组件内可以通过 `$route.params.id` 来获取传递的参数。

这些是常见的 Vue Router 的传参方式，您可以根据实际需求选择适合您的方式来传递参数。