错误展示

VUE菜单有一个BUG当我们点击其它按钮或者首页的时候已经展示的一级菜单是不会自动收缩的。

这个问题也导致很多开发者把一级菜单都换成了二级菜单。

错误展示

因为我使用的是ruoyi的前端框架所以菜单文件的路径是src/layout/components/Sidebar/index.vue文件如果大家使用的是其他的框架或者自己写的去全局搜索关键字【el-menu】就能找到菜单页面。

文件路径如下图

el-menu

记录用户上次点击的菜单索引keyIndex:0,};},watch:

{$route

监控用户点击的菜单如果是首页或者个人详情页面都要把上次打开的页面收缩起来。

if

(this.$route.path

{this.$refs.menu.close(this.keyIndex);}}},methods:

{handleOpen

wrap-classscrollbar-wrapperel-menurefmenuopenhandleOpen:default-activeactiveMenu:collapseisCollapse:background-colorsettings.sideTheme

***me-dark

variables.menuLightBackground:text-colorsettings.sideTheme

***me-dark

variables.menuLightColor:unique-openedtrue:active-text-colorsettings.***me:collapse-transitionfalsemodeverticalsidebar-itemv-for(route,

index)

index:itemroute:base-pathroute.path//el-menu/el-scrollbar/div

/templatescript

/assets/styles/variables.scss;export

default

{this.$refs.menu.close(this.keyIndex);}}},methods:

{handleOpen

{...mapState([settings]),...mapGetters([sidebarRouters,

{const

this.$store.state.settings.sidebarLogo;},variables()

{return

-----华丽的分割线以下是凑字数大家不用花时间看快去改代码-----

-----华丽的分割线以下是凑字数大家不用花时间看快去改代码-----

-----华丽的分割线以下是凑字数大家不用花时间看快去改代码-----

templatediv

v-ifhasOneShowingChild(item.children,item)

(!onlyOneChild.children||onlyOneChild.noShowingChildren)!item.alwaysShowapp-link

:toresolvePath(onlyOneChild.path,

onlyOneChild.query)el-menu-item

:indexresolvePath(onlyOneChild.path)

:class{submenu-title-noDropdown:!isNest}item

:icononlyOneChild.meta.icon||(item.metaitem.meta.icon)

:title$t(onlyOneChild.meta.title)

//el-menu-item/app-link/templateel-submenu

v-else

//templatesidebar-itemv-forchild

item.children:keychild.path:is-nesttrue:itemchild:base-pathresolvePath(child.path)classnest-menu//el-submenu/div

/templatescript