vue页面 当前行跳转详情页

要实现当前行跳转详情页，可以使用 Vue Router 的编程式导航。具体步骤如下：

1. 在当前行设置点击事件，绑定一个方法。例如：

<template>
  <table>
    <tbody>
      <tr v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 25 }
      ]
    }
  },
  methods: {
    goDetail(id) {
      // TODO: 跳转到详情页
    }
  }
}
</script>

2. 在 `goDetail` 方法中，使用 `$router.push` 方法跳转到详情页。例如：

goDetail(id) {
  this.$router.push({ name: 'Detail', params: { id }})
}

其中，`Detail` 是详情页的路由名称，`id` 是当前行的 id。

3. 在路由配置中，定义详情页的路由。例如：

const routes = [
  { path: '/', component: Home },
  { path: '/detail/:id', name: 'Detail', component: Detail }
]

其中，`:id` 表示动态路由参数，可以通过 `$route.params.id` 在详情页中获取当前行的 id。

希望这些步骤可以帮助您实现当前行跳转详情页。