vue动态渲染三级菜单

一：描述

将菜单渲染为上图样式
已确定路由中包含三级菜单，点击二级菜单时，在下方一tab选项卡方式展示所有三级菜单

代码

1.路由配置

{
    path: '/build',
    name: 'build',
    meta: {
      icon: 'office-building',
      title: '一级菜单',
      leaf: false,
      hidden: false,
    },
    component: loginpage,
    redirect: '/build/screen',
    children: [{
        path: 'screen',
        name: 'screen',
        meta: {
          title: '二级菜单',
          threeMenu: false,
          hidden: false,
        },
        component: () => import('../views/screen/Screen.vue'),
      },
      {
        path: 'onlinem',
        name: 'garden',
        meta: {
          title: '二级菜单',
          threeMenu: true,
          hidden: false,
        },
        component: Middle,
        redirect: '/build/onlinem/review',
        children: [{
            path: 'review',
            name: 'review',
            meta: {
              title: '三级菜单',
              hidden: false,
            },
            component: () => import('../views/review/Review.vue'),
          },
          {
            path: 'team',
            name: 'team',
            meta: {
              title: '三级菜单',
              hidden: false,
            },
            component: () => import('../views/team/Team.vue'),
          },
          {
            path: 'fruit',
            name: 'fruit',
            meta: {
              title: '三级菜单',
			  hidden: false,
            },
            component: () => import('../views/fruit/Fruit.vue'),
          },
        ],
      },

    ],
  },
  {
    path: '/intel',
    name: 'intel',
    meta: {
      icon: 'receiving',
      title: '一级菜单',
      leaf: false,
      hidden: false,
    },
    component: loginpage,
    redirect: '/intel/program',
    children: [
      {
        path: 'program',
        name: 'program',
        meta: {
          title: '二级菜单',
        },
        component: () => import('../views/planpage/planpage.vue'),
      },
      {
        path: 'develop',
        name: 'develop',
        meta: {
          title: '二级菜单',
        },
        component: () => import('../views/buildpage/buildpage.vue'),
      },
    ],
  },

路由配置说明

1.leaf 表示一级菜单下是否有子菜单。 true：只有一级菜单，没有自己菜单；false：有自己菜单（有二级菜单、三级菜单都是false）
2.hidden：该路由配置的信息是都要在导航栏中隐藏起来。true：在导航栏上隐藏起来；false：不隐藏
3.threeMenu:是否有三级菜单;true该二级菜单有三级菜单；false该二级菜单没有三级菜单
4.有三级菜单时， 二级菜单添加redirect进行重定向。

封装导航栏

导航栏直接使用elemen中的代码
sidebar.vue

<template>
  <div class="sidebar">
    <el-menu class="el-menu-demo" mode="horizontal" text-color="#444" active-text-color="##fff " :show-timeout="200"
      router @select="handleSelect">
      <sidebar-item v-for="(item,itemid) in permission_routes" :key="itemid" :item="item"></sidebar-item>
    </el-menu>
    //三级菜单展示
    <div class="smenu" v-if="srs">
      <div class="sbox">
        <router-link v-for="three in snhm" :key="three.name" :to="three.path">
          {{three.meta.title}}
        </router-link>
      </div>
    </div>
  </div>
</template>

computed: {
      ...mapGetters([
        'permission_routes',
      ]),//动态路由
    },
watch: {
      "$route": {
        handler(val, oldval) {
          this.getChildRoute(val)
        },
        deep: true,
        immediate: true
      },
    },

methods: {
      // 二级菜单被选
      handleSelect(key, keyPath) {
        if (this.$store.state.user.token) {
          // this.pagestate = false
          this.$emit('pagestate', false)
        }
      },
      // 三级菜单
      getChildRoute(currRoute) {
        console.log('三级菜单')
        if (currRoute.matched.length == 3) {
          this.permission_routes.map(item => {
            if (currRoute.matched[0].path == item.path) {
              // 二级路由，所有三级路由的数据
              item.children.map(child => {
                if (currRoute.matched[1].name == child.name) {
                  this.snhm = JSON.parse(JSON.stringify(child.children))
                }
              })
            }
          })
          this.srs = true;//有三级菜单则展示
        } else {
          this.snhm = [currRoute];
          this.srs = false;//没有三级菜单则不展示
        }
      }
    },

在渲染导航栏过程中，需要判断菜单的hidden属性；由于v-if优先级高于v-for，将菜单内容进行组件封装
sidebaritem.vue

<template>
  <div v-if="!item.meta.hidden">
    <template v-if="item.meta.leaf">
      <el-menu-item :index="item.redirect">
        <span slot="title">{{item.meta.title}}</span>
      </el-menu-item>
    </template>
    <el-submenu v-else :index="item.redirect">
      <template slot='title'>
        <span>{{item.meta.title}}</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item v-for="(child,childId) in item.children" :index="item.path +'/'+ child.path" :key="childId"
        v-if="!child.meta.hidden">
        {{child.meta.title}}
      </el-menu-item>
    </el-submenu>
  </div>
</template>

props: {
      item: {
        type: Object,
        required: true,
      },
    },

以上根据转载修改为自己可用
转载地址：
(该文章为左侧两级导航栏及面包屑方式展示三级菜单）
https://blog.csdn.net/Start2019/article/details/119851382