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

Question

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

Answer 1

??上午好，题主！目前：??[在线]
??参考GPT-4o mini 模型、由清水白石008整理提供！
??今日金句：“苦难是人生的老师，通过苦难，走向欢乐。” —— 贝多芬

在 Vue 3 + TypeScript 中，如果你想要实现点击每行的编辑按钮，根据 id 跳转到编辑页面进行编辑，通常可以按照以下步骤操作：

1. 设置路由

首先，你需要确保你的路由配置正确，以便能够根据 id 跳转到编辑页面。假设你的编辑页面是 EditPage.vue，你可以在 router/index.ts 中设置路由：

import { createRouter, createWebHistory } from 'vue-router';
import EditPage from '@/views/EditPage.vue'; // 确保路径正确

const routes = [
  // 其他路由
  {
    path: '/edit/:id', // :id 是动态参数
    name: 'EditPage',
    component: EditPage,
  },
];

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

export default router;

2. 创建表格并添加编辑按钮

在你的表格组件中，添加编辑按钮，并在点击按钮时根据 id 跳转到编辑页面。示例代码如下：

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
          <button @click="editItem(item.id)">编辑</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

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

export default defineComponent({
  setup() {
    const router = useRouter();
    
    const items = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      // 添加更多项
    ];

    const editItem = (id: number) => {
      router.push({ name: 'EditPage', params: { id } }); // 跳转到编辑页面，并传递 ID
    };

    return {
      items,
      editItem,
    };
  },
});
</script>

3. 编辑页面接收参数

在你的编辑页面 EditPage.vue 中，你可以通过路由参数获取 id，并根据这个 id 加载对应的数据：

<template>
  <div>
    <h1>编辑项: {{ itemId }}</h1>
    <!-- 编辑表单 -->
  </div>
</template>

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

export default defineComponent({
  setup() {
    const route = useRoute();
    const itemId = route.params.id; // 获取路由参数中的 ID

    // 根据 ID 加载数据，可以在这里发送请求获取数据

    return {
      itemId,
    };
  },
});
</script>

4. 确保处理 404 错误

如果你老是遇到 404 错误，请检查以下几点：

1. 确保路径正确：确保你的 URL 路径和路由定义一致。

2. 确保 ID 存在：在你的数据源中，确保 ID 是有效的，并且对应的资源在服务器端可用。

3. 404 处理：可以在你的路由配置中添加一个 404 页面，处理未找到的路由：

{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: NotFoundComponent, // 404 组件
}

总结

以上就是在 Vue 3 + TypeScript 中实现点击编辑按钮根据 ID 跳转到编辑页面的基本流程。确保路由配置、表格逻辑和编辑页面逻辑都正确无误，这样应该能顺利实现你的需求。如果还有其他问题或需要更详细的帮助，请告诉我！