Vue.js实现表格行点击在新标签页展示详情的方法

方案一：快速实现（无需路由） #

直接通过API获取详情数据，在新标签页生成HTML展示内容，适合快速验证需求。

修改 EmployeList.vue： #

1. 模板部分：替换原生onclick为Vue的点击事件，传递员工ID

<tr v-for="item in list" v-bind:key="item.id">
  <td>
    <el-link type="primary" @click="openEmployeeDetail(item.id)" target="_blank">
      {{ item.employee_name }}
    </el-link>
  </td>
  <td>{{ item.employee_salary }}</td>
  <td>{{ item.employee_age }}</td>
</tr>

2. 脚本部分：实现打开详情的方法，获取单员工数据并在新标签渲染

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios)

export default {
  name:'EmployeList',
  props: ['employeName','employeSalary','employeAge'],
  data() {
    return {list: undefined,}
  },
  mounted() {
    axios.get('http://dummy.restapiexample.com/api/v1/employees').then((resp)=>{
      this.list = resp.data.data;
    })
  },
  methods: {
    openEmployeeDetail(employeeId) {
      axios.get(`http://dummy.restapiexample.com/api/v1/employee/${employeeId}`)
        .then(resp => {
          const emp = resp.data.data;
          const newWin = window.open('', '_blank');
          // 写入详情页面的HTML
          newWin.document.write(`
            <html>
              <head>
                <title>${emp.employee_name} 详情</title>
                <style>
                  body { margin: 2rem; font-family: Arial, sans-serif; }
                  .card { border: 1px solid #eee; padding: 1.5rem; border-radius: 8px; }
                  .item { margin: 0.8rem 0; }
                  .label { font-weight: bold; }
                </style>
              </head>
              <body>
                <h1>${emp.employee_name}</h1>
                <div class="card">
                  <div class="item"><span class="label">ID:</span> ${emp.id}</div>
                  <div class="item"><span class="label">薪资:</span> $${emp.employee_salary}</div>
                  <div class="item"><span class="label">年龄:</span> ${emp.employee_age}</div>
                  <div class="item"><span class="label">头像:</span><br>
                    <img src="${emp.profile_image}" alt="头像" style="max-width: 200px;">
                  </div>
                </div>
              </body>
            </html>
          `);
          newWin.document.close();
        })
        .catch(err => console.error('获取详情失败:', err))
    }
  }
}
</script>

方案二：Vue Router 规范实现（推荐） #

适合中大型项目，通过路由跳转实现详情页面，更符合Vue开发规范。

步骤1：安装Vue Router #

npm install vue-router@3  # 对应Vue2版本，Vue3请安装vue-router@4

步骤2：创建详情组件 EmployeeDetail.vue #

<template>
  <div class="detail-page">
    <h1>{{ employee?.employee_name }} 的详情</h1>
    <div v-if="employee" class="detail-card">
      <div class="detail-item"><span class="label">ID:</span> {{ employee.id }}</div>
      <div class="detail-item"><span class="label">姓名:</span> {{ employee.employee_name }}</div>
      <div class="detail-item"><span class="label">薪资:</span> ${{ employee.employee_salary }}</div>
      <div class="detail-item"><span class="label">年龄:</span> {{ employee.employee_age }}</div>
      <div class="detail-item"><span class="label">头像:</span><br>
        <img :src="employee.profile_image" alt="员工头像" style="max-width: 200px;">
      </div>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'EmployeeDetail',
  data() {
    return {
      employee: null
    }
  },
  mounted() {
    // 从路由参数获取员工ID
    const empId = this.$route.params.id;
    axios.get(`http://dummy.restapiexample.com/api/v1/employee/${empId}`)
      .then(resp => this.employee = resp.data.data)
      .catch(err => console.error('加载详情失败:', err))
  }
}
</script>

<style scoped>
.detail-page { margin: 2rem; font-family: Arial, sans-serif; }
.detail-card { border: 1px solid #ddd; padding: 1.5rem; border-radius: 8px; margin-top: 1rem; }
.detail-item { margin: 0.8rem 0; }
.label { font-weight: bold; margin-right: 0.5rem; }
</style>

步骤3：配置路由 #

在项目根目录创建 router/index.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '../views/index.vue';
import EmployeeDetail from '../components/EmployeeDetail.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'Index', component: Index },
  { path: '/employee/:id', name: 'EmployeeDetail', component: EmployeeDetail }
];

const router = new VueRouter({
  mode: 'history', // 可选，移除URL中的#
  routes
});

export default router;

步骤4：在 main.js 引入路由 #

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

步骤5：修改 EmployeList.vue 的模板 #

方式A：使用router-link直接跳转

<tr v-for="item in list" v-bind:key="item.id">
  <td>
    <router-link 
      :to="{ name: 'EmployeeDetail', params: { id: item.id } }" 
      target="_blank"
      type="primary"
    >
      {{ item.employee_name }}
    </router-link>
  </td>
  <td>{{ item.employee_salary }}</td>
  <td>{{ item.employee_age }}</td>
</tr>

方式B：使用点击事件跳转

<tr v-for="item in list" v-bind:key="item.id">
  <td>
    <el-link type="primary" @click="openDetailTab(item.id)">
      {{ item.employee_name }}
    </el-link>
  </td>
  <td>{{ item.employee_salary }}</td>
  <td>{{ item.employee_age }}</td>
</tr>

添加对应方法：

methods: {
  openDetailTab(empId) {
    // 解析路由地址并打开新标签
    const url = this.$router.resolve({ name: 'EmployeeDetail', params: { id: empId } }).href;
    window.open(url, '_blank');
  }
}

内容的提问来源于stack exchange，提问作者Prasanna Naik