vue3页面跳转传参

在 Vue 3 中，你可以通过使用编程式导航来实现页面跳转并传递参数。以下是一个简单的示例：

1. 首先，确保你已经安装了 Vue Router。如果没有安装，可以使用以下命令进行安装：

npm install vue-router@next

2. 在你的项目中创建一个 `router.js` 文件，并配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import UserComponent from './components/UserComponent.vue';

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 在你的组件中，使用 `$router.push()` 方法进行页面跳转，并传递参数。例如：

<template>
  <div>
    <button @click="goToUser(123)">Go to User</button>
  </div>
</template>

<script>
export default {
  name: 'HomeComponent',
  methods: {
    goToUser(id) {
      this.$router.push({ name: 'User', params: { id } });
    }
  }
}
</script>

这样，当点击 "Go to User" 按钮时，将会跳转到 `/user/123` 路径，并将参数 `id` 设置为 `123`。

在目标组件中，可以通过 `$route.params` 来获取传递的参数。

希望对你有所帮助！如果有任何问题，请随时提问。