当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 22:48:50

在 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>