要使用
vue-element-admin的三级路由，
需要进行以下步骤：
1. 在src/router/index.js文件中定义路由。
2. 在src/views/layout/components/Sidebar/index.
vue文件中定义导航菜单。
3. 在src/views/layout/components/SidebarItem.
vue文件中定义导航菜单子项。
下面是一个简单的示例：
```javascript
// 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
```
```html
<!-- 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>
```
```html
<!-- 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来优化。
1690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
