使用vue-cli 4.0 搭建后台系统（顶部导航+左侧导航）第四集

时间：2020-06-18 14:37:32 阅读：140 评论：0 收藏：0 [点我收藏+]

1。主要说一说，顶部导航和左侧菜单的联动和切换。主要组件components->topbar->inedx.vue

<el-menu

:default-active="activeMenu"

class="el-menu-bar"

mode="horizontal"

:background-color="variables.navBg"

:text-color="variables.textColor"

:active-text-color="variables.activeTextColor"

@select="handleSelect"

handleSelect(key, keyPath) {

console.log(keyPath)

this.$emit(‘select‘, keyPath[0])

以上是顶部导航组件切换的事件，会触发父组件的select事件

layout 组件内的select事件

</div>

selectMenu(name) {

this.menuActiveName = name

}

左侧菜单会接受到这个 this.menuActiveName 值

左侧菜单会根据这个值去生成左侧菜单的路由表

就是这个routes属性；根据routes 循环左侧菜单的展示

技术图片

这样就实现的顶部菜单和左侧菜单的联动，

当然还有顶部大收缩功能也在左侧菜单做了实现，具体可以看代码。

原文地址：https://www.cnblogs.com/-youth/p/13157362.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行

使用vue-cli 4.0 搭建后台系统 （顶部导航+左侧导航） 第四集