vue+elementui 网站首页顶部菜单上下布局

 

菜单集合后台接口动态获取，保存到store vuex状态管理器 

<template><div id="app"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"routeractive-text-color="#ffd04b"><el-submenu :index="item.path" :key="item.path" v-for="item in sidebarRouters" v-if="item.meta"><template slot="title" >{{ item.meta.title }}</template><el-menu-item  :key="child.path" :index="item.path+'/'+child.path" v-for="child in item.children" v-if="child.meta" >{{ child.meta.title }}</el-menu-item></el-submenu><!--<el-menu-item index="/1" v-for="item of sidebarRouters"><span v-if="item.meta"> {{item.meta.title}} </span></el-menu-item><el-menu-item index="/bar" >消息中心</el-menu-item><el-menu-item index="/foo" >消息中心2</el-menu-item><el-menu-item index=""><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>--></el-menu><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div></template><script>import {mapState} from "vuex";
import store from '@/store'
export default {name: 'Layout',data() {return {activeIndex2: '0',sidebarRouters: store.getters.sidebarRouters};},methods: {handleSelect(key, keyPath) {//console.log(JSON.stringify(store.getters.sidebarRouters))console.log(key, keyPath);}}
};</script><style scoped lang="scss"></style>