vue-element-admin三级菜单

vue-element-admin是一个基于Vue.js和Element UI的前端框架，可以用于快速开发管理系统界面。在该框架中，三级菜单是指页面只对应三级菜单，没有二级菜单的页面。通过引用的描述，可以看出vue-element-admin可以实现三级菜单的布局。

另外，根据引用的描述，多级菜单的实现原理类似，需要注意四级菜单的第二级和第三级需要链接到index.vue中。这意味着在vue-element-admin框架中，可以通过配置路由和组件的方式实现多级菜单。

对于需求中提到的二级菜单和三级菜单的显示方式，引用中描述了顶部菜单栏后，生产管理模块对应的二级菜单是横向显示的，但需求是希望二级菜单和三级菜单是纵向显示的。在vue-element-admin框架中，可以通过自定义样式或修改布局组件来实现二级菜单和三级菜单的纵向显示。

综上所述，vue-element-admin框架可以实现三级菜单，并且可以通过配置路由和组件来实现多级菜单。同时，可以通过自定义样式或修改布局组件来实现二级菜单和三级菜单的纵向显示。

相关问题

vue-element-admin的三级路由如何使用

要使用vue-element-admin的三级路由，需要进行以下步骤：

1. 在src/router/index.js文件中定义路由。

2. 在src/views/layout/components/Sidebar/index.vue文件中定义导航菜单。

3. 在src/views/layout/components/SidebarItem.vue文件中定义导航菜单子项。

下面是一个简单的示例：

// src/router/index.js

import Layout from '@/layout'

const routes = [
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    children: [
      {
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' },
        children: [
          {
            path: 'list',
            name: 'TreeList',
            component: () => import('@/views/tree/list'),
            meta: { title: 'Tree List', icon: 'list' }
          },
          {
            path: 'detail',
            name: 'TreeDetail',
            component: () => import('@/views/tree/detail'),
            meta: { title: 'Tree Detail', icon: 'detail' }
          }
        ]
      }
    ]
  }
]

export default routes

<!-- src/views/layout/components/Sidebar/index.vue -->

<template>
  <div class="sidebar-container">
    <el-scrollbar wrap-class="sidebar-wrapper">
      <el-menu
        :default-active="$route.path"
        mode="vertical"
        :collapse="sidebar.opened"
        :unique-opened="true"
        :default-openeds="sidebar.openeds"
        class="el-menu-vertical-demo sidebar-menu"
        router
        collapse-transition
      >
        <sidebar-item v-for="item in sidebar.items" :key="item.index" :item="item" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem'

export default {
  name: 'Sidebar',
  components: {
    SidebarItem
  },
  props: {
    sidebar: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<!-- src/views/layout/components/SidebarItem.vue -->

<template>
  <div>
    <template v-if="!item.children">
      <el-menu-item :index="item.path" :route="{ path: item.path }">
        <i :class="`iconfont ${item.meta.icon}`"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-submenu :index="item.path">
        <template slot="title">
          <i :class="`iconfont ${item.meta.icon}`"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <sidebar-item v-for="child in item.children" :key="child.path" :item="child" />
      </el-submenu>
    </template>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem'

export default {
  name: 'SidebarItem',
  components: {
    SidebarItem
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

在这个示例中，我们定义了一个路由配置，包含了两个一级路由，即/dashboard和/example，以及一个二级路由/example/tree，它包含了两个三级路由/example/tree/list和/example/tree/detail。然后在Sidebar组件中，我们使用了一个递归组件SidebarItem来渲染导航菜单，这个组件可以处理任意层级的菜单项。在SidebarItem组件中，我们根据是否存在子菜单来渲染el-menu-item或el-submenu，然后递归渲染子菜单。

使用vue-element-admin的三级路由需要注意以下几点：

1. 三级路由需要在二级路由的children属性中定义。

2. 导航菜单需要使用递归组件来渲染。

3. 递归渲染组件需要注意性能问题，可以使用v-for的key来优化。

vue-element-admin 三级路由缓存

在 vue-element-admin 中，可以通过配置路由 meta 中的 keepAlive 属性来进行缓存。但是对于三级路由缓存，需要将他们作为二级路由的子路由进行配置。

具体配置方式如下：

1. 在 router/index.js 中，将三级路由定义为二级路由的子路由，例如：

{
  path: '/system',
  component: Layout,
  redirect: '/system/menu',
  name: 'System',
  meta: { title: '系统管理', icon: 'example' },
  children: [
    {
      path: 'menu',
      name: 'Menu',
      component: () => import('@/views/system/menu'),
      meta: { title: '菜单管理', icon: 'table', keepAlive: true }
    },
    {
      path: 'role',
      name: 'Role',
      component: () => import('@/views/system/role'),
      meta: { title: '角色管理', icon: 'tree', keepAlive: true }
    },
    {
      path: 'user',
      name: 'User',
      component: () => import('@/views/system/user'),
      meta: { title: '用户管理', icon: 'user', keepAlive: true }
    },
    {
      path: ':id', // 三级路由
      name: 'EditUser',
      component: () => import('@/views/system/edit-user'),
      meta: { title: '编辑用户', icon: 'user', hidden: true } // 隐藏该路由
    },
  ]
},

2. 在 src/layout/components/MultiTab下的index.vue中，监听路由变化，根据当前路由中的 fullPath 进行判断，如果是三级路由，则将 fullPath 的前缀作为 parentPath 保存下来，用于找到他的二级父路由，从而正确进行缓存。

computed: {
  // 通过 fullPath 匹配出二级父路由名称
  parentPath() {
    const { fullPath } = this.$route;
    const matched = this.$route.matched;
    if (matched && matched.length > 2) {
      const parentPath = `/${matched[1].path}`;
      return fullPath.replace(parentPath, '').split('/')[1];
    }
    return '';
  },
  // 是否需要缓存
  needKeepAlive() {
    const { meta } = this.$route;
    if (meta && (typeof meta.keepAlive !== 'undefined')) {
      return meta.keepAlive;
    }
    return false;
  }
},

watch: {
  '$route': function(newVal, oldVal) {
    // 监听路由变化，判断是否需要缓存
    if (this.needKeepAlive) {
      const fullPath = newVal.fullPath;
      if (fullPath !== oldVal.fullPath) {
        const parentPath = this.parentPath;
        if (parentPath) {
          this.cacheList.push(`${parentPath}/${fullPath}`);
        } else {
          this.cacheList.push(fullPath);
        }
      }
      this.$forceUpdate();
    }
  }
}

3. 在 src/layout/components/MultiTab下的tab-list.vue中，根据传入的 cacheList 进行渲染路由缓存。

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" :key="$route.path" />
</keep-alive>
<component v-else :is="currentRoute.component" :key="currentRoute.path" />
...
computed: {
  // 用于 keep-alive 的路由列表
  keepAliaveList() {
    if (this.cacheList.length) {
      const keepAliveList = this.cacheList.map(item => {
        const matched = item.split('/');
        if (matched.length > 2) {
          // 当前路由是三级路由，需要找到他的二级父路由
          const parentPath = `/${matched[1]}`;
          const parentRoute = this.getRouteObjByName(parentPath);
          if (parentRoute) {
            return {
              ...this.getRouteObjByName(item),
              parent: parentRoute
            };
          }
        } else {
          // 当前路由是二级路由，直接返回
          return this.getRouteObjByName(item);
        }
      }).filter(item => item);
      return keepAliveList;
    }
    return [];
  }
},
methods: {
  // 根据路由名称获取路由对象
  getRouteObjByName(name) {
    const routes = this.$router.options.routes;
    const obj = routes.find(route => route.path === name);
    return obj;
  },
  // 关闭所有缓存的标签页
  closeAllTags() {
    this.cacheList = [];
    this.$store.dispatch('multiTab/resetTabs');
  },
  ...
}

通过这些配置，即可实现 vue-element-admin 的三级路由缓存功能。