码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:系统   top   实现   com   efault   you   功能   console   mod   

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 class="navbar-container">
      <NavBar @select="selectMenu" />
    </div>
技术图片

 

 

 
selectMenu(name) {
      this.menuActiveName = name
  }
 
左侧菜单会接受到这个 this.menuActiveName 值
左侧菜单会根据这个值去生成左侧菜单的路由表
技术图片

 

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

技术图片

 

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

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

 
 
 

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

标签:系统   top   实现   com   efault   you   功能   console   mod   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!