三、Home 组件处理

布局 Home 组件基本结构

这里我们可以使用 Element 组件库中的 Container 布局容器 实现基本结构。

src/components/home/home.vue：

<template>
  <el-container class="container">
    <el-header class="header">Header</el-header>
    <el-container class="container">
      <el-aside class="aside" width="200px">Aside</el-aside>
      <el-main class="main">Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style>
.header {
  background-color: #b3c1cd;
}
.container, .aside, .main, .aside .nav-menu {
  height: 100%;
}
.aside {
  background-color: #d4dfe4;
}
.main {
  background-color: #eaeef1;
}
</style>

布局侧边栏

src/components/home/home.vue：

<template>
<el-container class="container">
  <el-header class="header">Header</el-header>
  <el-container class="container">
    <el-aside class="aside" width="200px">
      <el-menu
        default-active="2"
        class="nav-menu"
        unique-opened="true"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="1-1">用户列表</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item index="2-1">角色列表</el-menu-item>
          <el-menu-item index="2-2">权限列表</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item index="3-1">商品列表</el-menu-item>
          <el-menu-item index="3-2">分类参数</el-menu-item>
          <el-menu-item index="3-3">商品分类</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>订单管理</span>
          </template>
          <el-menu-item index="4-1">订单列表</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>数据统计</span>
          </template>
          <el-menu-item index="5-1">数据报表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main class="main">Main</el-main>
  </el-container>
</el-container>
</template>

布局 Header 头部

这里我们使用的是 Element 组件库自带的 Layout 布局 来完成 Header 组件基本样式结构。

<template>
<el-container class="container">
  <el-header class="header">
    <el-row>
      <el-col :span="4">
        <img src="./logo.png" alt="黑马程序员">
      </el-col>
      <el-col :span="16">电商后台管理系统</el-col>
      <el-col :span="4">
        <a href="#">退出</a>
      </el-col>
    </el-row>
  </el-header>
  ... 代码略

处理用户退出

首先为顶部的退出按钮注册一个点击事件处理函数：

<el-container class="container">
  <el-header class="header">
    <el-row>
      <el-col :span="4">
        <img src="./logo.png" alt="黑马程序员">
      </el-col>
      <el-col :span="16">电商后台管理系统</el-col>
      <el-col :span="4">
        <a @click.prevent="handleLogout" href="#">退出</a>
      </el-col>
    </el-row>
  </el-header>
  ... 代码略

methods 中 handleLogout 具体实现：

// ... 代码略
handleLogout () {
  this.$confirm('确认退出吗？', '退出提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => { // 用户点击 确定 执行这里
    // 1. 删除本地存储中的 token，也就是清除登陆状态
    window.localStorage.removeItem('token')
    // 2. 跳转到 /login
    this.$router.push('/login')
    this.$message({
      type: 'success',
      message: '退出成功!'
    })
  }).catch(() => { // 用户点击 取消 执行这里
    this.$message({
      type: 'info',
      message: '已取消退出'
    })
  })
}
// ... 代码略