el-menu与vue-router结合的二级目录如何进行排序
时间: 2024-09-27 13:17:47 浏览: 35
在Vue.js中,`el-menu` 是 Element UI 提供的一个用于构建导航栏的组件,而 `vue-router` 则用于管理页面路由。当需要将它们结合起来实现二级目录的排序时,你可以按照以下步骤操作:
1. 安装依赖:首先确保已经安装了 `element-ui` 和 `vue-router`。
2. 配置菜单数据:在项目里,通常会在数据层(如Vuex)或者组件的data中创建一个菜单数组,每个菜单项包含`path`(对应路由路径)、`name`(显示名称),以及`children`(如果有二级菜单)。可以设置一个字段,比如`order`,用于指定排序顺序。
```javascript
const routes = [
{
path: '/',
name: '一级菜单1',
children: [
{ path: '/子级1', name: '子级1', order: 1 },
{ path: '/子级2', name: '子级2', order: 2 }
]
},
// 其他一级菜单...
]
```
3. 根据需要对菜单数据排序:你可以选择在加载数据时就排序,或者在用户切换路由时动态调整。这里可以利用数组的排序方法,例如 `sort()` 或者自定义排序函数,基于`order`字段来进行升序或降序排列。
```javascript
function sortMenu(menuItems) {
return menuItems.sort((a, b) => a.order - b.order);
}
// 在路由守卫中应用排序
router.afterEach(() => {
const sortedRoutes = sortMenu(routes);
});
```
4. 使用 `el-menu` 渲染排序后的菜单:在模板中,通过循环渲染排序后的菜单,使用`v-for`指令展示各个菜单项,并监听`active-name`或`index`的变化来更新当前激活的菜单项。
```html
<template>
<el-menu :default-active="$route.path" class="menu">
<el-submenu v-for="(item, index) in sortedRoutes" :key="index">
<template slot="title">{{ item.name }}</template>
<el-menu-item-group :title="item.name" v-if="item.children.length > 0">
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
{{ child.name }}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
```