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"
      router
      active-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>
相关推荐
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz4 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258594 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1236 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜056 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js