在Vue3中使用$router.push方法进行路由跳转时，如何传递多个路径参数？

在 Vue 3 里，你可以借助 $router.push 方法进行路由跳转，同时传递多个路径参数。下面为你详细介绍具体实现方式：

1. 路由配置

首先，要在路由配置中定义好需要的路径参数。示例如下：

import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from './views/UserProfile.vue';const routes = [{path: '/user/:id/:name',name: 'UserProfile',component: UserProfile}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

在这个路由配置里，/user/:id/:name 定义了两个路径参数：id 和 name。

2. 使用 $router.push 传递多个路径参数

在组件中，你可以使用 useRouter 来获取路由实例，然后使用 push 方法传递多个路径参数

<template><div><button @click="goToUserProfile">跳转到用户资料页</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const goToUserProfile = () => {router.push({name: 'UserProfile',params: {id: 123,name: 'JohnDoe'}});
};
</script>    

3. 在目标组件中接收参数

在目标组件 UserProfile.vue 里，你可以使用 useRoute 来获取路由信息，进而获取传递的路径参数。

<template><div><h1>用户资料页</h1><p>用户 ID: {{ route.params.id }}</p><p>用户姓名: {{ route.params.name }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';const route = useRoute();
</script>    

注意事项

• 参数顺序：在路由配置里，路径参数的顺序是固定的。例如 /user/:id/:name，传递参数时要保证顺序一致。
• 参数类型：路径参数在 URL 中以字符串形式存在，即便传递的是数字，接收时也会是字符串类型。若需要使用其他类型，要进行相应的类型转换。