Vue+ElementUI實現簡單的用戶管理系統（四）：查看用戶詳情頁及刪除用戶

（一）展示用戶詳細信息

在點擊“查看”按鈕時，傳遞了用戶的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,
  },