点击菜单项打开新的组件页面，并高亮显示菜单项

点击用户列表打开新的组件页面

1.在components添加user文件夹下新建Users.vue组件
2.在页面右侧主题区域展示User组件
（1）在router.js中导入组件

 import User from './components/user/Users.vue'

（2）在home路由中新增一个子路由

const router = new Router({
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
        {
            path: '/home',
            component: Home,
            redirect: '/welcome',
            children: [
                { path: '/welcome', component: Welcome },
                //新增user子路由
                { path: '/users', component: Users },
            ]
        }
    ]
})

点击的用户列表菜单栏高亮显示（让侧边栏default-active属性值等于当前点击菜单的 index）

思想：

点击时将对应的index值保存到sessionStorage中
将点击时保存的值赋值给侧边栏属性default-active

点击时将对应的index值保存到sessionStorage中

1. 给二级菜单添加点击事件

@click="saveNavState('/' + subItem.path)"

2.保存链接的激活状态(点击二级菜单时在sessionStorage中保存一个键值对"activePath", activePath，
如：点击用户列表，“activePath”, /users)

saveNavState(activePath) {
  window.sessionStorage.setItem("activePath", activePath);
},

当home页面刷新时取出保存的activePath值赋值给侧边栏进行激活，点击二级菜单需要立即给activePath重新赋值，实现菜单高亮显示动态切换
3.在data中定义activePath保存激活的链接地址

data() {
    return {
     //保存激活的链接地址
      activePath: "",
    };
  },

动态绑定到侧边栏上

:default-active="activePath"

4.动态赋值，home组件一创建就从sessionStorage取出赋值给data中的activePath

 created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },

5.点击二级菜单时，需要给data中的activePath重新赋值

 saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },