使用vue-init-webpack 模板 配合route-view搭建菜单栏

预览

核心代码

router文件夹下的index.js

import Vue from "vue";
import Router from "vue-router";
import {MenuComponent} from "@/Layout";


Vue.use(Router);


export default new Router({
    routes: [
        {
            path: "/",
            component: MenuComponent,
            children: [
                {
                    path: "/",
                    name: "HelloWorld",
                    component: () => import("@/components/HelloWorld")
                }
            ]
        },
        {
            path: "/mqtt_test",
            component: MenuComponent,
            children: [
                {
                    path: "/mqtt_test",
                    name: "MqttTest",
                    component: () => import("@/components/mqtt_test")
                }
            ]
        },
        {
            path: "/MonthComponent",
            component: MenuComponent,
            children: [
                {
                    path: "/MonthComponent",
                    name: "MonthComponent",
                    component: () => import("@/components/month_component")
                }
            ]
        }
        // {
        //     path: "/mqtt_test",
        //     name: "MqttTest",
        //     component: MqttTest
        // },
        // {
        //     path: "/MonthComponent",
        //     name: "MonthComponent",
        //     component: MonthComponent
        // }
    ]
});

MenuComponent.vue

<template>
  <div class="el-menu-demo">
    <el-menu
        :default-active="activeMenu"
        @select="menuSelect"
        mode="horizontal"
    >
      <el-menu-item v-for="(item,idx) in routerList" v-bind:key="idx" :index="item.path">
        <i class="el-icon-menu"></i>
        <span slot="title">
         {{ item.name }}
        </span>
      </el-menu-item>
    </el-menu>


    <!--视图窗口：多用于布局，比如全局菜单栏或测导航等  -->
    <!--不加router-view组件,会只显示菜单而不显示菜单下的页面 以下是官方介绍：-->
    <!--这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。-->
    <!--同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>-->
    <router-view></router-view>
  </div>
</template>


<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    activeMenu() {
      return this.$route.path;
    },
    routerList() {
      return this.$router.options.routes.map(item => {
        return {
          path: item.path,
          children: item.children,
          name: item.children[0].name
        };
      });
    }
  },
  created() {


  },
  methods: {
    menuSelect(v) {
      if (this.$route.path !== v) {
        this.$router.push(v);
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.el-menu-demo {
  user-select: none
}
</style>

layout文件夹下的index.js

export {default as MenuComponent} from "./menu";