vueelementuinavmenu多级导航菜单（⽔平、垂直）
⽂章⽬录
vue elementui navmenu 多级导航菜单
路由跳转(⼀)
el-menu标签中的router
参数说明类型可选值默认值router是否使⽤ vue-router 的模式，启⽤该模式会在激活导航时以 index 作为 path 进⾏路由跳转boolean—false
<el-menu router>
组件(NavMenu.vue) 中的路由跳转,:index="ity.name"
:default-active="activeIndex"中的activeIndex默认值也要是.entity.name的值
此时菜单数据中的value 没有⽤到，可以删除。
注意路由变化
组件（NavMenu.vue）
<div class="navMenu">
<template v-for="navMenu in navMenus">
<!-- 最后⼀级菜单 -->
<el-menu-item v-if="!navMenu.childs&&ity"
:key="ity.id":data="navMenu":index="ity.name"
>
<i :class="ity.icon"></i>
<span slot="title">{{ity.alias}}</span>
</el-menu-item>
<!-- 此菜单下还有⼦菜单 -->
<el-submenu v-if="navMenu.childs&&ity"
:key="ity.id":data="navMenu":index="ity.name"> <template slot="title">
<i :class="ity.icon"></i>
<span> {{ity.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-menu
background-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",
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>
</style>
路由跳转(⼆)
Menu-Item Attribute
参数说明类型可选值默认值route Vue Router 路径对象Object——此⽅法要同时设置<el-menu router>，否则⽆效
组件(NavMenu.vue) 中的路由跳转,:route="ity.value"
:index="ity.name"只是唯⼀标识，与:default-active="activeIndex"中的activeIndex是对应的
NavMenu.vue的<el-menu-item中加上:route="ity.value"
<!-- 最后⼀级菜单 -->
<el-menu-item v-if="!navMenu.childs&&ity"
:key="ity.id":data="navMenu":index="ity.name":route="ity.value"
>
此时效果图(路由变化)
⽔平效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。