# Navigation 导航
<el-menu><el-menu-item></el-menu-item></el-menu>
| 属性 | 说明 | 类型 | 默认值 |
|---|
| mode | 菜单展示模式 | string | horizontal、vertical |
| default-active | 默认激活菜单的 index | string | — |
| router | 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — |
<el-menu-item></el-menu-item>
| 属性 | 说明 | 类型 | 默认值 |
|---|
| index | 唯一标志 | string/null | — |
| route | Vue Router 路径对象 | object | — |
| disabled | 是否禁用 | boolean | — |
<template>
<div>
<el-menu mode="vertical">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
</el-menu>
<el-menu mode="horizontal" default-active="1">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
</el-menu>
<el-menu mode="horizontal" default-active="1" router>
<el-menu-item index="1" route="/">首页</el-menu-item>
<el-menu-item index="2" route="/user">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
</el-menu>
</div>
</template>
<el-menu><el-sub-menu><el-menu-item></el-menu-item></el-sub-menu></el-menu>
| 属性 | 说明 | 类型 | 默认值 |
|---|
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） | boolean | — |
| menu-trigger | 子菜单打开的触发方式，只在 mode 为 horizontal 时有效。 | string | hover、click |
<el-sub-menu><el-menu-item></el-menu-item></el-sub-menu>
| 属性 | 说明 | 类型 | 默认值 |
|---|
| index | 唯一标志 | string | — |
| show-timeout | 展开 sub-menu 的延时 | number | — |
| hide-timeout | 收起 sub-menu 的延时 | number | — |
| disabled | 是否禁用 | boolean | — |
<template>
<div>
<el-menu default-active="1" router>
<el-menu-item index="1" route="/">首页</el-menu-item>
<el-menu-item index="2" route="/user">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
<el-sub-menu index="4">
<template #title>日志管理</template>
<el-menu-item index="5" route="/code_log">验证码日志</el-menu-item>
<el-menu-item index="6" route="/login_log">登录日志</el-menu-item>
</el-sub-menu>
<el-sub-menu index="10" show-timeout="1000" hide-timeout="1000">
<template #title>系统管理</template>
<el-menu-item index="11" route="/admin">管理员列表</el-menu-item>
<el-menu-item index="12" route="/power">权限列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="13" disabled>
<template #title>课程管理</template>
<el-menu-item index="14" route="/course">课程列表</el-menu-item>
</el-sub-menu>
</el-menu>
<el-menu default-active="1" router mode="vertical" collapse style="width:200px">
<el-menu-item index="1" route="/">首页</el-menu-item>
<el-menu-item index="2" route="/user">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
<el-sub-menu index="4">
<template #title>日志管理</template>
<el-menu-item index="5" route="/code_log">验证码日志</el-menu-item>
<el-menu-item index="6" route="/login_log">登录日志</el-menu-item>
</el-sub-menu>
</el-menu>
<el-menu default-active="1" router mode="horizontal" menu-trigger="click">
<el-menu-item index="1" route="/">首页</el-menu-item>
<el-menu-item index="2" route="/user">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
<el-sub-menu index="4">
<template #title>日志管理</template>
<el-menu-item index="5" route="/code_log">验证码日志</el-menu-item>
<el-menu-item index="6" route="/login_log">登录日志</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
</template>
| 事件名 | 说明 | 参数 |
|---|
| click | 菜单点击时的回调函数 | el-menu-item 实例 |
<template>
<div>
<el-menu default-active="1" mode="horizontal">
<el-menu-item index="1" @click="event('/')">首页</el-menu-item>
<el-menu-item index="2" @click="event('/user')">用户管理</el-menu-item>
<el-menu-item index="3" disabled>订单管理</el-menu-item>
<el-sub-menu index="4">
<template #title>日志管理</template>
<el-menu-item index="5">验证码日志</el-menu-item>
<el-menu-item index="6">登录日志</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
</template>
<script>
export default({
setup() {
const event = (e) => {
console.log(e);
}
return {
event
}
}
})
</script>
