现在有一个table表格，我要点击每行的编辑按钮，然后根据id跳转到编辑页面进行编辑技术栈是vue3+ts。

Question

现在有一个table表格，我要点击每行的编辑按钮，然后根据id跳转到编辑页面进行编辑，跳转的编辑页面是editProgramCom.vue,怎么操作，跳转之前的页面是program.vue,router页面又怎么操作呢？加上id我老是404， 技术栈是vue3+ts。

Answer 1

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id">
      <td>{{ item.name }}</td>
      <td>
        <button @click="editItem(item.id)">编辑</button>
      </td>
    </tr>
  </table>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      tableData: [
        // 假设这是你的表格数据，包含 id 和其他字段
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
  methods: {
    editItem(id: number) {
      // 这里进行页面跳转逻辑
      this.$router.push({ name: 'editProgramCom', params: { id } });
    },
  },
});
</script>