Vue2 + element-ui后台管理项目—用户管理

---

一、用户列表

1.新建用户列表组件

在Components文件夹下新建user文件夹，在user文件夹下创建用户管理组件 Users.vue，在router/index.js中导入路由组件并在home这个路由规则的children属性中把user作为一个子规则定义进来

//router/index.js
import Users from '../components/user/Users.vue'

const router = new VueRouter({
   index.js
  routes: [
    {
    path: '/', redirect: '/mylogin' },
    {
    path: '/mylogin', component: myLogin },
    {
   
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        {
    path: '/welcome', component: Welcome },
        {
    path: '/users', component: Users }
      ]
    }
  ]
})

2.解决点击用户列表链接未高亮问题

点击链接的时候把对应的地址保存在sessionstorage中，当下一次刷新页面时把值取出来动态赋值给default-active属性，
所以给二级菜单el-menu-item绑定单击事件 @click="saveNavState('/' + subItem.path)"
定义函数：

// 保存链接的激活状态
    saveNavState (activePath) {
   
      window.sessionStorage.setItem('activePath', activePath)
    }

此时点击用户列表链接sessionStorage中就出现了键：activePath，值为 /users

在data中定义数据保存激活的链接

// 被激活的链接地址
      activePath: ''

把地址动态绑定到el-menu上

:default-active="activePath"

给activePath动态赋值，应当是整个home组件被创建的时候就立即从sessionStorage把值取出来，组件被创建的时候执行created生命周期函数，所以在created中获取

created () {
   
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },

最后注意在点击不同菜单链接时应该立即为activePath重新赋值

saveNavState (activePath) {
   <