2023年7月16日发(作者：)

vueelementuinavmenu多级导航菜单（⽔平、垂直）⽂章⽬录vue elementui navmenu 多级导航菜单路由跳转(⼀)el-menu标签中的router参数router说明是否使⽤ vue-router 的模式，启⽤该模式会在激活导航时以 index 作为 path 进⾏路由跳转类型boolean可选值—默认值false组件() 中的路由跳转,:index="":default-active="activeIndex"中的activeIndex默认值也要是.的值此时菜单数据中的value 没有⽤到,可以删除。注意路由变化组件（）调⽤（）路由跳转(⼆)Menu-Item Attribute参数route说明Vue Router 路径对象类型Object可选值—默认值—此⽅法要同时设置,否则⽆效组件() 中的路由跳转,:route="":index=""只是唯⼀标识,与:default-active="activeIndex"中的activeIndex是对应的的

最后⼀级菜单 --> 此时效果图(路由变化)⽔平效果图区别1. 调⽤时在 ⽂件中

中添加

mode="horizontal"2. 此时样式并不完全是⽔平样式,，因为我们的组件中嵌套了⼀层div（组件template下必须有⼀个跟标签），导致elementui 的样式发⽣变化，因为它调⽤的⽅式是（ .el-menu–horizontal>.el-submenu）⽤了>⼦元素选择器。所以要在

中添加样式如果是克隆的代码 ，请注意将 中的style样式去掉/*

⽔平样式 */ .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;}图1(看上述代码)图2(看上述代码)问题1 刷新页⾯刷新页⾯时,如果路由为⾮active路由,激活路由与实际路由不符合(因为页⾯路由不变,但是activeIndex变成默认值)中添加这段代码,刷新后重置到默认的路由mounted(){ this.$('/') }2 ⾮最后⼀层,点击可跳转路由默认的路由跳转是此级菜单中的最后⼀层可跳转，若想其他层也可跳转，可进⾏如下设置 中,在中添加@="goto()"goto(path){ if(path){ this.$(path) } }如果哪个⽬录不可跳转路由,可将其设置value='',但是不能没有value这个值。但是，由此引发⼀个问题就是，点击后，虽然路由跳转,但是没有当前路由激活样式。（因为elementui的默认样式只有在最后⼀层）观察路由变化,点击⽆变化的是设置value=''有其他⽅案,也可提供给我,谢谢!3 ⽔平菜单点击多路由时，有轮廓简单粗暴的解决⽅法// 4 刷新不折叠导航在中添加mounted(){ let start = dexOf('/'); let path = (start+1); Index = path;}主要是在刷新是获取浏览器地址 截取对应的路由 当前激活菜单的 index 重新设置即可 :default-active=“activeIndex”，这⾥的activeIndex 和路由⼀致都是5 ⽔平菜单过长，可滚动添加两个style 样式在对应的位置，但是这样的话，⽔平菜单中有下拉菜单，并且超过页⾯宽度，会点不到,所以你设置的宽度要⼤于展开所有下拉的宽度。这个的宽度，你可以根据你有多少个菜单项 或者是当前窗⼝的宽度，计算后赋值给width 6 垂直菜单过长，可滚动...另⼀篇我的关于多级导航菜单的博客