一、编写首页

使用 elementui 的布局容器

布局容器

1. src\views\Home.vue 页面

<template>
  <el-container class="container">
    <!-- 头部 -->
    <el-header>
      <el-row>
        <el-col :span="12">
          <el-image style="width: 210px; height: 54px" :src="url"></el-image>
        </el-col>
        <el-col class="logout" :span="12">
          <template>
            <div class="navOperater">
              <el-link type="info">退出系统</el-link>
            </div>
            <div class="navOperater">
              <el-avatar
                class="avatar"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
            </div>
          </template>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside>
        <Aside />
      </el-aside>
      <!-- 内容区 -->
      <el-main>
        <template>
      
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入组件
import Aside from "@/components/aside/index.vue";

export default {
  name: "home",
  components: {
    Aside
  },
  data() {
    return {
      url: "/logo.png",
      fits: ["fill", "contain", "cover", "none", "scale-down"]
    };
  }
};
</script>
<style lang="scss" scoped>
body > .el-container {
  margin-bottom: 40px;
}
.container {
  height: 600px;
}
.el-header {
  text-align: left;
  background-color: white;
  .logout {
    text-align: right;
    .navOperater {
      width: 80px;
      height: 80px;
      float: right;
      line-height: 50px;
    }
  }
}
.el-main {
  background-color: #e9eef3;
  text-align: center;
}
</style>

2. 新建 src\components\aside\index.vue

<template>
  <div>
    <!-- 菜单组件 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 子菜单：用户管理 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="11" >用户管理</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="12" >密码重置</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 子菜单：商品管理 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="21">商品分类</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="22">商品管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 子菜单：订单管理 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="31">订单管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 子菜单：会员管理 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>会员管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="41">会员管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  }
};
</script>

<style scoped>
</style>

二、编写路由

1. 修改 src/router/index.js:

    {
      path: '/admin',
      name: 'admin',
      component: Home,
      children: [
        {path: 'admin', name: 'admin', component: Admin, },
        {path: 'pwdReset', name: 'pwdReset', component: ()=>import('@/views/admin/pwdReset.vue'), },
      ]
    },

2.添加要跳转的组件
src\views\admin\index.vue

<template>
  <!-- 用户管理 -->
  <div>用户管理</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>

src\views\admin\pwdReset.vue

<template>
  <!-- 密码重置 -->
  <div>密码重置</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>

3. 添加链接跳转事件
   src\components\aside\index.vue

  <el-menu-item-group>
    <el-menu-item index="11" @click="navUser">用户管理</el-menu-item>
  </el-menu-item-group>
  <el-menu-item-group>
    <el-menu-item index="12" @click="navPwd">密码重置</el-menu-item>
  </el-menu-item-group>

事件：

 navUser() {
      this.$router.push("/admin/admin");
    },
    navPwd(){
       this.$router.push("/admin/pwdReset");
    }

三、页面测试

用户管理
密码重置