Vue3和typeScript路由传参

在Vue 3和TypeScript中，你可以使用vue-router来进行路由传参。以下是一个简单的例子，展示了如何在路由中传递参数，并在目标组件中接收这些参数。

首先，确保你已经安装并设置了vue-router。

1. 定义路由，并在路由定义中添加参数：

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;

2. 在目标组件中接收参数：

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

3. 导航并传递参数：

// 在其他组件中
this.$router.push({ name: 'About', params: { id: '123' } });

在这个例子中，我们定义了一个带有参数的About路由。我们启用了props选项，这样可以通过props将参数传递给组件。在组件内部，我们使用useRoute钩子来访问路由参数。

确保你的项目配置正确，并且已经安装了vue-router和相关类型定义（如果你使用TypeScript的话）。