vue-admin-template员工详情查看

跳转至详情页需携带ID

<el-table-column label="操作" width="280px">
<template v-slot="{ row }">
<el-button size="mini" type="text" @click="$router.push(`/employee/${row.id}`)">查看</el-button>
<el-button size="mini" type="text">角色</el-button>
<el-popconfirm
        title="确认删除该行数据吗？"
@onConfirm="confirmDel(row.id)"
        >
<el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
</el-popconfirm>

</template>
</el-table-column>

跳转携带的ID通过路由传参。

@click="$router.push(`/employee/${row.id}`)"

路由中要指定：ID

{
        path: '/employee/detail/:id?', // 员工详情的地址
        component: () => import('@/views/employee/detail.vue'),
        hidden: true, // 表示隐藏在左侧菜单
        meta: {
        title: '员工详情' // 显示在导航的文本
        }
        }

详情页获取路由参数this.$route.params

created() {
    // 如何获取路由参数的中id
    // if (this.$route.params.id) { this.getEmployeeDetail() }
    this.$route.params.id && this.getEmployeeDetail()
},

api.js

    /**
     *  获取员工详情
     * **/

    export function getEmployeeDetail(id) {
    return request({
            url: `/employee/${id}`
  })
}

后端

@GetMapping("/{id}")
public Result<Employee> getEmployeeDetail(HttpServletRequest request,@PathVariable String id){

    Employee employee = employeeService.getById(id);

    return Result.success(employee);
}