vue3 + ts 页面跳转传参数

在 Vue 3 中结合 TypeScript 使用时，页面跳转并传递参数通常会涉及到路由配置和组件间的通信。以下是基本步骤：

1. 安装依赖：
首先，确保已经安装了 Vue Router 和 Vue 的 TypeScript 插件，可以使用 `vue-router` 和 `vue-class-component` 或者 `@vue/cli-plugin-typescript`。

2. 路由配置：
在 `src/router/index.ts` 文件里，创建一个包含动态参数的路由：

import { createRouter } from 'vue-router';
import Home from '@/views/Home.vue';

const routes = [
  {
    path: '/detail/:id', // 动态路由，id 是参数名
    name: 'Detail',
    component: Home,
    props: true, // 允许通过 route 的 params、query 或 meta 来向组件传递数据
  },
];

const router = createRouter({
  mode: 'history', // 根据需求选择浏览器兼容模式
  base: process.env.BASE_URL,
  routes,
});

export default router;

3. 组件接收参数：
在 `Home.vue` 或其他需要接收参数的组件中，使用 `<router-view>` 并使用 `props` 注解：

import { Component, Prop } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
  @Prop(String) id!: string; // 在这里声明接受字符串类型的 id 参数

  mounted() {
    console.log('Received parameter:', this.id);
    // 这里可以进行进一步的操作，比如根据 id 调用 API 获取详情
  }
}

4. 跳转并传参：
在导航到这个组件的地方，如点击事件或某个函数中，你可以这样调用：

import { useRouter } from 'vue-router';

export default {
  methods: {
    goToDetail(id: string) {
      const router = useRouter();
      router.push(`/detail/${id}`);
    },
  },
};
// 然后在模板里触发跳转，例如按钮点击事件:
<button @click="goToDetail('your-param')">跳转到详细页</button>