（一）展示用户详细信息

在点击“查看”按钮时，传递了用户的Id，我们要把这个Id拿出来：

this.$route.query.id

created() {
    this.handle(this.$route.query.id);
  },

handle方法，也就是根据id使用axios发送get请求拿到用户的详细信息：

handle(id){
        let config = {
          url:'http://localhost:3000/users/'+id,
          method: 'get',
        }
        axios(config)
            .then((response) => {
              console.log(response)
              this.customer = response.data
             //  console.log(customer)
            })
      },

（二）template:

<template>
  <div class="customerDetail">
    <el-button type="primary" icon="el-icon-edit" circle @click.native="updateCustomer(customer.id)"></el-button>
    <el-button type="danger" icon="el-icon-delete" circle @click.native="deleteCustomer(customer.id)"></el-button>
    <el-divider><i class="el-icon-apple"></i></el-divider>
    <h1>{{customer.name}}</h1>
    <el-divider><i class="el-icon-grape"></i></el-divider>
    <h1>{{customer.phone}}</h1>
    <el-divider><i class="el-icon-watermelon"></i></el-divider>
    <h1>{{customer.email}}</h1>
    <el-divider><i class="el-icon-cherry"></i></el-divider>
  </div>
</template>

data(){
      return {
        customer:[]
      }
    },

（三）删除用户方法

调用axios的delete方法，传入id即可。

 deleteCustomer(id){
        console.log(id)
        axios.delete('http://localhost:3000/users/'+id)
            .then((response) => {
              console.log(response)
              this.$message({
                message: '成功删除',
                // type: 'success'
              });
              this.$router.push({path:'/customers'})
            })
      }

（四）跳转到编辑界面

updateCustomer(id){
        return this.$router.push({
          path:'/updatecustomer',
          query:{
            id:id
          }
        })
      },

路由配置：

 {
    path: '/updatecustomer',
    name:Edit,
    component: Edit,
  },