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来优化。