笔记5：主页布局-用户列表【Vue实战项目：电商管理系统（Element-UI）】

1 整体布局

2 完成用户列表

2.1 通过路由的形式展示列表组件

• 创建Users页面：/components/user/Users.vue

<template>
    <div>
        <h3>用户组件列表</h3>
    </div>
</template>

<script>
export default {
   
    
}
</script>

<style lang="less" scoped>

</style>

• 设置路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/user/Users.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 }
      ]
    }
  ]
})

2.2 在sessionStorage中保存左侧菜单的激活状态

实现任何情况下，均能正常展示二级菜单的激活状态

• 定义一个变量记录激活的二级菜单的index

data() {
   
return {
   
  ...
  activiPath: "",
};

• 在element ui的menu中属性default-active能展示当前激活的菜单

<el-menu ... :default-active="activiPath">

• 二级菜单绑定点击方法

<el-menu-item ... @click="saveNavState('/' + subItem.path)" >

• 实现该点击方法，将点击后的路径保存

// 保存二级菜单激活状态
saveNavState(activiPath) {
   
  window.sessionStorage.setItem("activiPath", activiPath); // 将路径保存到sessionStorage中
  this.activiPath = activiPath; // 给公共变量赋值
},

• 在创建页面时赋值（刷新页面的情况）