关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

因为这是element中两个不相关联的组件,无法通过组件内的方法去实现这个需求。我采用vuex状态机来实现。
关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题
关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

为三个导航栏绑定点击事件,点击的时候去改变状态机里的state数据。

关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

然后再相应的页面里,调用updated狗子函数,当页面更新的时候,从状态机里从新取出showIndex的值。

关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题
关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

这时候就发现,点击顶部导航栏的时候,对应的内容区侧边栏导航对应的item也高亮了,实现了这个需求。