Vue3给table表格字段，添加超级链接，点击后跳转

问题：给名称字段添加链接，实现点击跳转

1.给name列添加扩展内容

<template>
  <el-table :data="tableData" style="width: 100%">
       <!-- 获取id -->
    <el-table-column prop="id" label="#ID" width="60"> </el-table-column>
    
      <!-- 获取名字 -->
    <el-table-column prop="name" label="名称" width="100">
    <!-- scope代表的是当前列的填充数据 -->
      <!-- 丰富table标签，用 <template #default="scope">标签进行扩展 -->
      <template #default="scope">
         
         <!-- name：跳转的地址  query根据id进行查询-->
        <router-link :to="{ name: 'about', query: { id: scope.row.id } }">
         <!-- 当前列取值-->
          {{ scope.row.name }}
          </router-link>
     
      </template>
    </el-table-column>
 
  <!-- 获取图片 -->
    <el-table-column prop="img" label="图片">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.img"
          fit="contain"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import http from "@/http/index";

//定义变量是需要用ref包裹一下
const tableData = ref([]);

//onMounted当页面加载时，显示数据
onMounted(() => {
  http
    .get("/api/products2")
    .then((res: any) => {
      tableData.value = res;
    })
    .catch((err: any) => {});
});

</script>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px; 
}
</style>

2.添加路由的 name: ‘about’，

 {
        path: '/about',
        name: 'about',
        component: () => import("@/views/About.vue"),
        meta: { title: "关于我们", icon: "Box", show: true, isFrame:true }
}