vue3怎么用编程式导航传参数

在 Vue 3 中，您可以使用 `router.push()` 方法进行编程式导航，并通过第二个参数传递路由参数。具体步骤如下： 1. 在组件中导入 `useRouter` 函数： ```javascript import { useRouter } from 'vue-router' ``` 2. 在组件中调用 `useRouter` 函数获取 `router` 实例： ```javascript const router = useRouter() ``` 3. 使用 `router.push()` 方法进行编程式导航，并通过第二个参数传递路由参数： ```javascript router.push({ path: '/path/to/route', query: { id: 123 } }) ``` 在这个示例中，我们将路由路径设置为 `/path/to/route`，并将路由参数设置为 `{ id: 123 }`。您可以根据需要修改这些值。 请注意，在使用路由参数时，您需要在路由配置中定义相应的参数。例如，如果您想要使用 `id` 参数，请在路由配置中添加以下代码： ```javascript { path: '/path/to/route', name: 'RouteName', component: RouteComponent, props: (route) => ({ id: route.query.id }) } ``` 在这个示例中，我们将路由参数 `id` 映射到组件的 `props` 属性中。在组件中，您可以通过 `this.$route.params.id` 访问该参数。