在Vue 3和TypeScript中，你可以使用vue-router来进行路由传参。以下是一个简单的例子，展示了如何在路由中传递参数，并在目标组件中接收这些参数。
首先，确保你已经安装并设置了vue-router。
- 定义路由，并在路由定义中添加参数：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about/:id', // 添加参数
name: 'About',
component: About,
props: true // 启用 props 传参
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;- 在目标组件中接收参数：
<template>
<div>
<h1>About Page</h1>
<p>{{ id }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
props: {
id: {
type: String,
required: true
}
},
setup() {
const route = useRoute();
// 如果启用了 props，可以直接通过 props 接收参数
// 如果没有启用 props，可以通过 route.params 来接收参数
return {
id: route.params.id
};
}
});
</script>- 导航并传递参数：
// 在其他组件中
this.$router.push({ name: 'About', params: { id: '123' } });在这个例子中，我们定义了一个带有参数的About路由。我们启用了props选项，这样可以通过props将参数传递给组件。在组件内部，我们使用useRoute钩子来访问路由参数。
确保你的项目配置正确，并且已经安装了vue-router和相关类型定义（如果你使用TypeScript的话）。