[JavaScript知识库]element 三级导航栏（递归方法）

组件NavMenu?

<template>
  <div>
    <template v-for="item in routerList">
      <el-submenu v-if="item.hasOwnProperty('children')&&item.children.length>0" :key="item.path" :index="item.path">
        <template slot="title" style="padding-left:10px">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.name}}</span>
        </template>
        <!--  如果有子级数据使用递归组件 -->
        <Menu :routerList="item.children"></Menu>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :key="item.path">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  props: ['routerList'],
  name: 'Menu',//模板名称
  created () {
    console.log(this.routerList, 'routerList')
  },
}
</script><style  lang="scss">
.el-menu--collapse span,
.el-menu--collapse i.el-submenu__icon-arrow {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
</style>

调用组件

<template>
  <div>
    <div class="tools" @click="toggleClick">
      <i :class="icon"></i>
    </div>

    <div class="df">
      <div class="left">
        <el-menu
          router
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="rgb(0, 80, 96)"
          text-color="rgba(255,255,255,0.7)"
          unique-opened
          default-active='/forms'
        >
          <Menu :routerList="routers"></Menu>
        </el-menu>
      </div>
      <div class="right">
        <router-view />
      </div>
    </div>
  </div>
</template>



<script>
import Menu from "./components/NavMenu"; 
export default {
  data() {
    return {
      isCollapse: false, //菜单展开功能
      unCollapse: {
        width: "220px",
      },
      collapse: {
        width: "50px",
      },
      unCollapseMain: {
        paddingLeft: "220px",
      },
      collapseMain: {
        paddingLeft: "50px",
      },
    };
  },
  components: {
    Menu,
  },
  computed: {
    routers() {
      return this.$router.options.routes[2].children;
    },
    icon: function () {
      return this.isCollapse ? "el-icon-right" : "el-icon-back";
    },
  },
  methods: {
    toggleClick() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style  lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: 100%;
}
.el-menu--collapse{
  height: 100%;
}
.tools {
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  color: pink;
  background-color: rgb(24, 9, 78);
}
.df {
  display: flex;
}
.left {
  width: 200px;
  height: calc(100vh - 30px);
  // background-color: rgb(0, 80, 96);
}
.right {
  width: calc(100% - 200px);
  height: calc(100vh - 30px);
}
</style>

路由

import Vue from 'vue'
import Router from 'vue-router'

import layout from '@/layout/index'

Vue.use(Router)
const constantRouter = [
  {
    path: '/',
    redirect: () => {
      return '/login'
    }
  },
  {
    path: '/login',
    component: resolve => require(['@/view/login/index'], resolve),
    meta: {
      role: ['admin', 'super_editor']
    }
  },
  {
    path: '/layout',
    // name: '首页',
    component: layout,
    children: [
      {
        path: '/mall',
        name: '****',
        icon: 'el-icon-goods',
        keepalive: true,
        component: () => import('@/view/one/one'),
        // redirect: '/mall-list',
        children: [
          {
            path: '/forms',
            name: '表格数据',
            icon: 'el-icon-goods',
            keepalive: true,
            // redirect: '/three-1',
            component: () => import('@/view/one/one')
          },
          {
            path: '/mall-list2',
            name: '初选管理',
            icon: 'el-icon-goods',
            // redirect: '/three-1',
            component: () => import('@/view/one/one')
          },
          {
            path: '/commodity',
            name: '商品',
            icon: 'el-icon-goods',
            // redirect: '/three-1',
            component: () => import('@/view/one/one')
          },
          {
            path: '/treeview',
            name: '树形控件',
            icon: 'el-icon-service',
            component: () => import('@/view/one/one')
          },
          {
            path: '/tree',
            name: '树形控件2',
            icon: 'el-icon-service',
            component: () => import('@/view/one/one'),
            children: [
              {
                path: '/three-1',
                name: '三级级菜单-1',
                component: () => import('@/view/one/one'),
                children: [
                  {
                    path: '/fore-1',
                    name: '四级级菜单-1',
                    // component: () => import('@/pages/asideBar/fore')
                  },
                  {
                    path: '/fore-2',
                    name: '四级级菜单-2',
                    // component: () => import('@/pages/asideBar/fore2')
                  }
                ]
              }
            ]
          },
          {
            path: '/subassembly',
            name: '组件传值',
            icon: 'el-icon-service',
            component: () => import('@/view/one/one')
          }
        ]
      },
      {
        path: '/one-2',
        name: '富文本编辑',
        icon: 'el-icon-service',
        component: () => import('@/view/one/one'),
        children: [
          {
            name: '二级菜单-2',
            icon: 'el-icon-service',
            path: '/one-3',
            component: () => import('@/view/one/one')
          }
        ]
      }
    ]
  }
]

// const asyncRouter = [
//   {
//     path: '/asyncRouter',
//     name: 'asyncRouter',
//     component: ()=> import( '@/pages/asyncRouter' )
//   }
// ]

export default new Router({
  mode: 'history', // 用这个模式可以把#号去掉
  routes: constantRouter
})

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读