使用vue-cli 4.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 class="navbar-container">

      <NavBar @select="selectMenu" />

    </div>

 

 

 

selectMenu(name) {

      this.menuActiveName = name

  }

 

左側菜單會接受到這個 this.menuActiveName 值

左側菜單會根據這個值去生成左側菜單的路由表

 

就是這個routes屬性；根據routes 循環左側菜單的展示

 

 這樣就實現的頂部菜單和左側菜單的聯動，

當然還有頂部大收縮功能也在左側菜單做了實現，具體可以看代碼。