标题：电商后台管理系统——主页

标题：电商后台管理系统——主页

添加主页组件:
1.router.js中添加主页组件路由

const router = new Router({
  routes: [
	...
    { path: '/home', component: Home }
  ]
})

2.login.vue中登录成功后跳转到主页页面

	this.$router.push('/home')

3.在components文件夹并新建Home.vue组件
添加template，script，style标签；

页面效果图
实现功能：退出功能；侧边菜单栏折叠功能；3.菜单栏图标

页面结构：
使用【组件】Container布局容器

<el-container class="home-container">
  <!-- 头部区域 -->
  <el-header>Header</el-header>
  <!-- 页面主体区域 -->
  <el-container>
  	<!-- 侧边栏 -->
    <el-aside width="200px">Aside</el-aside>
    <!-- 右侧内容主体 -->
    <el-main>Main</el-main>
  </el-container>
</el-container>

页面结构->头部区域结构：

    <el-header>
      <div>
        <img src="../assets/heima.png" alt />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>

页面结构->头部区域样式：
1.el-header使用flex布局将div（图标+文字）和el-button分居两边
display: flex;
justify-content: space-between;
align-items: center;
2.div使用flex布局设置图标和文字水平对齐

.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  color: #fff;
  font-size: 20px;
  div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}

页面结构->头部区域逻辑：退出功能
只需要销毁本地的 token 即可；使用路由跳转回登录页面；

//结构
<el-button type="info" @click="logout">退出</el-button>

//逻辑实现
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('./login')
    },
    ...

页面结构->侧边区域结构：

    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 切换折叠 -->
        <div class="toggle-button" @click="toggleCollapse"</div>
	    <!-- 侧边栏菜单 -->
	    <el-menu>
	    ...
	    </el-menu>
	  </el-aside>

页面结构->侧边区域样式：

.el-aside {
  background-color: #373d41;
}
.el-main {
  background-color: #eaedf1;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

页面结构->侧边区域逻辑：
折叠侧边栏功能：
1.绑定侧边栏宽度：由data中的isCollapse 标识符控制三目运算符结果;
2.按钮点击事件切换isCollapse 标识符状态控制侧边栏宽度，实现折叠效果

<el-aside :width="isCollapse ? '64px' : '200px'">
	<div class="toggle-button" @click="toggleCollapse">|||</div>
/***/
  data() {
    return {
      ...
      isCollapse: false
    }
  },
  methods:{
     ...
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    }
  }

页面结构->菜单栏区域结构：
选择组件navMenu（侧栏）：图标和文字用的是i和span标签

 	<el-menu 
 	background-color="#333744" text-color="#fff" 
 	active-text-color="#409EFF" unique-opened 		   
 	:collapse="isCollapse" :collapse-transition="false" 
 	router :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
           <el-menu-item 
             :index="'/' + subItem.path" 
             v-for="subItem in item.children" 
             :key="subItem.id" 
             @click="saveNavState('/' + subItem.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span></template
              >
            </el-submenu>
          </el-submenu>
        </el-menu>

页面结构->菜单栏区域样式：
解决菜单栏和侧边栏不对齐问题：

.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}

页面结构->菜单栏区域逻辑：
1.数据获取
一级菜单：v-for=“item in menulist”
二级菜单：v-for=“subItem in item.children”
注意二级菜单是el-menu-item
2.菜单栏图标：
iconsObj对象: 键值又获取到的数据中得来

<i :class="iconsObj[item.id]"></i>

3.菜单栏组件开启路由模式，点击切换右侧内容主体
- 1.el-menu标签router 属性 开启路由模式，改造index以/+path形式：<el-menu-item :index="’/’ + subItem.path"
- 2. 当点击二级菜单的时候，被点击的二级子菜单并没有高亮，我们需要正在被使用的功能高亮显示
我们可以通过设置el-menu的default-active属性来设置当前激活菜单的index，但是default-active属性也不能写死，固定为某个菜单值
所以我们可以先给所有的二级菜单添加点击事件,并将path值作为方法的参数@click=“saveNavState(’/’+subItem.path)”
在saveNavState方法中将path保存到sessionStorage中
然后在数据中添加一个activePath绑定数据，并将el-menu的default-active属性设置为activePath
最后在created中将sessionStorage中的数据赋值给activePath
this.activePath = window.sessionStorage.getItem(“activePath”)

 <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">

   data() {
    return {
      menulist: [],
      iconsObj: {
        125: 'iconfont icon-user',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      },
      isCollapse: false
    }
  },
  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
    methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('./login')
    },
    async getMenuList() {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      console.log(res.data)
      this.menulist = res.data
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
        // 保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }

后续：
1.二级菜单设置为路由模式后，创建组件并引入，添加路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
.....
Vue.use(Router)
const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },
        { path: '/users', component: Users },
        { path: '/rights', component: Rights },
        { path: '/roles', component: Roles },
        { path: '/categories', component: Cate },
        { path: '/params', component: Params },
        { path: '/goods', component: GoodsList },
        { path: '/goods/add', component: Add },
        { path: '/orders', component: Order },
        { path: '/reports', component: Report }
      ]
    }
  ]
})

2.右侧内容主体放置路由占位符

      <el-main>
                <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>