文章目录

• vue elementui navmenu 多级导航菜单
• • 路由跳转(一)
  • • 组件（NavMenu.vue）
    • 调用（app.vue）
  • 路由跳转(二)
  • 水平效果图
  • • 区别
  • 问题
  • • 1 刷新页面
    • 2 非最后一层,点击可跳转路由
    • 3 水平菜单点击多路由时，有轮廓
    • 4 刷新不折叠导航
    • 5 水平菜单过长，可滚动
    • 6 垂直菜单过长，可滚动

vue elementui navmenu 多级导航菜单

路由跳转(一)

• el-menu标签中的router

组件(NavMenu.vue) 中的路由跳转,:index="navMenu.entity.name"
:default-active="activeIndex"中的activeIndex默认值也要是.entity.name的值
此时菜单数据中的value 没有用到,可以删除。

注意路由变化

组件（NavMenu.vue）

<template><div class="navMenu"><template v-for="navMenu in navMenus"><el-menu-item v-if="!navMenu.childs&&navMenu.entity":key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" ><i :class="navMenu.entity.icon">i><span slot="title">{{navMenu.entity.alias}}span>el-menu-item><el-submenu v-if="navMenu.childs&&navMenu.entity":key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name"><template slot="title"><i :class="navMenu.entity.icon">i><span> {{navMenu.entity.alias}}span>template><NavMenu :navMenus="navMenu.childs">NavMenu>el-submenu>template>div>
template><script>export default {name: 'NavMenu',props: ['navMenus'],data() {return {}},methods: {}}
script><style>
style>

调用（app.vue）

<template><div><el-menubackground-color="#545c64"text-color="#fff"active-text-color="#ffd04b":default-active="activeIndex"router><NavMenu :navMenus="menuData">NavMenu>el-menu><router-view>router-view>div>
template><script>
import NavMenu from "./components/NavMenu.vue";
export default {components: {NavMenu: NavMenu},data() {return {activeIndex: 'aa',menuData: [{//一级entity: {id: 0,name: "aa",icon: "el-icon-message",alias: "一级菜单"}},{//一级entity: {id: 1,name: "systemManage",icon: "el-icon-message",alias: "两级菜单"},//二级childs: [{entity: {id: 3,name: "authManage",icon: "el-icon-loading",alias: "权限管理",value: { path: "/hello" }}},{entity: {id: 4,name: "roleManage",icon: "el-icon-bell",alias: "角色管理",value: "/system/role"}},{entity: {id: 2,name: "menuManage",icon: "el-icon-edit",alias: "菜单管理",value: "/system/menu"}},{entity: {id: 5,name: "groupManage",icon: "el-icon-mobile-phone\r\n",alias: "分组管理",value: "/system/group"}}]},{//一级entity: {id: 6,name: "userManage",icon: "el-icon-news",alias: "三级菜单"},//二级childs: [{entity: {id: 7,name: "accountManage",icon: "el-icon-phone-outline\r\n",alias: "帐号管理",value: ""},//三级childs: [{entity: {id: 14,name: "emailManage",icon: "el-icon-sold-out\r\n",alias: "邮箱管理",value: "/content/email"}},{entity: {id: 13,name: "passManage",icon: "el-icon-service\r\n",alias: "密码管理",value: "/content/pass"}}]},{entity: {id: 8,name: "integralManage",icon: "el-icon-picture",alias: "积分管理",value: "/user/integral"}}]},{//一级entity: {id: 40,name: "contentManage",icon: "el-icon-rank",alias: "四级菜单"},//er级childs: [{entity: {id: 41,name: "classifyManage2",icon: "el-icon-printer",alias: "分类管理"},//三级childs: [{entity: {id: 42,name: "classifyManage3",icon: "el-icon-printer",alias: "分类管理"},//四级childs: [{entity: {id: 43,name: "classifyManage4",icon: "el-icon-printer",alias: "分类管理",value: "/content/classify"}}]}]}]}]};}
};
script><style>
style>

路由跳转(二)

• Menu-Item Attribute

此方法要同时设置,否则无效

组件(NavMenu.vue) 中的路由跳转,:route="navMenu.entity.value"
:index="navMenu.entity.name"只是唯一标识,与:default-active="activeIndex"中的activeIndex是对应的

NavMenu.vue的中加上:route="navMenu.entity.value"

<el-menu-item v-if="!navMenu.childs&&navMenu.entity":key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name"  :route="navMenu.entity.value">

/* 水平样式 */.el-menu--horizontal>div>.el-submenu {float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal>div>.el-menu-item {float: left;height: 60px;line-height: 60px;margin: 0;border-bottom: 2px solid transparent;color: #909399;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal>div>.el-submenu .el-submenu__icon-arrow {position: static;vertical-align: middle;margin-left: 8px;margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal>div>.el-submenu .el-submenu__title {height: 60px;line-height: 60px;border-bottom: 2px solid transparent;color: #909399;
}

mounted(){this.$router.push('/')}

goto(path){if(path){this.$router.push(path)}}

// NavMenu.vue
<style scoped>
*{outline:none;
}
style>

mounted(){let start = window.location.href.lastIndexOf('/');let path = window.location.href.slice(start+1);this.activeIndex = path;
}

<el-menubackground-color="#545c64"text-color="#fff"active-text-color="#ffd04b":default-active="activeIndex"routermode="horizontal"style="overflow-x:auto;"><NavMenu :navMenus="menuData" style="width:800px;overflow-x:auto;">NavMenu>el-menu>

<el-menu ... style="height:100vh;width:230px;float:left;overflow-y:auto;">
...
el-menu>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！