vue2+elementui点击详情通过id跳转详情页面

假设你的列表页是一个 Vue 组件，里面有一个表格用来展示数据，每一行数据都有一个 id 字段，点击某一行数据的时候需要跳转到详情页并且将对应的 id 传递过去。

可以通过以下步骤实现：

1. 在表格中添加一个“详情”按钮或者使用 element-ui 的 table-column 组件的 slot-scope 插槽来自定义一列。

<el-table :data="tableData">
  <el-table-column label="标题">
    <template slot-scope="scope">
      {{ scope.row.title }}
    </template>
  </el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button type="text" @click="goDetail(scope.row.id)">详情</el-button>
    </template>
  </el-table-column>
</el-table>

2. 在组件的 methods 中添加 goDetail 方法。

methods: {
  goDetail(id) {
    this.$router.push(`/detail/${id}`)
  }
}

3. 在路由配置中添加详情页的路由。

{
  path: '/detail/:id',
  name: 'Detail',
  component: Detail
}

4. 在详情页组件中通过 $route.params.id 获取传递过来的 id。

<template>
  <div>
    <h1>{{ id }}</h1>
    <!-- 其他详情内容 -->
  </div>
</template>

<script>
export default {
  name: 'Detail',
  computed: {
    id() {
      return this.$route.params.id
    }
  }
}
</script>