点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件#xff0c;使用递归组件实现渲染等#xff0c;具体的优化可以看下面的注释…需求点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。

点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件使用递归组件实现渲染等具体的优化可以看下面的注释即可。

//顶部导航栏

classtop_div1imgsrc../assets/logo.pngaltlogstylewidth:

50px;

border-boxel-menu:default-activeactiveIndex2modehorizontalselecthandleSelectbackground-color#545c64text-color#fffactive-text-color#ffd04bclasstop_div2el-menu-item:indexString(index)v-for(item,

index)

slottitle我的工作台/templateel-menu-item

index4-1设置/el-menu-itemel-menu-item

index4-2退出/el-menu-item/el-submenu/el-menu/div/div

/templatescript

(localStorage.getItem(activeIndex2))

{this.activeIndex2

localStorage.getItem(activeIndex2);}

else

String(this.lists[0].id);}//用来默认展示左侧导航栏let

num

localStorage.getItem(key)if(num){this.setLeftMenus(this.lists[num].leftMenus);}else{this.setLeftMenus(this.lists[0].leftMenus);}},methods:

{...mapMutations([setLeftMenus]),//

keyPath)

ui组件库中顶部导航栏刷新高亮复原问题也可存储在vuex中if

(key

{localStorage.setItem(activeIndex2,

console.log(aaa,this.lists[key].leftMenus)if

{//

拿到所点击的导航栏的leftMenus,并存储在vuex中,然后在AsideLeft中拿到该数据this.setLeftMenus(this.lists[key].leftMenus);//点击顶部导航栏跳转到对应的左侧导航栏的第一个路由上this.$router.push({

name:

this.lists[key].leftMenus[0].name

name:

将key存储用来控制刷新左侧导航栏展示问题localStorage.setItem(key,key)}}//

(key

清空本地缓存的tokenlocalStorage.removeItem(token);//

name:

动态设置default-active为当前活跃路由的path可实现刷新多级菜单折叠问题

--el-menu:default-active$route.pathclassel-menu-vertical-demobackground-colorrgb(60,

60,

60)text-color#fffactive-text-color#ffd04brouterAside_demo

:leftMenusleftMenus/Aside_demo/el-menu/div

/templatescript

{...mapState([leftMenus]),},components:

{},

,并通过设置v-if来判断数据有无二级菜单数据以此来展示二级菜单--el-submenu

:indexitem.key

这里使用递归组件,用来遍历多级菜单将children数据传给递归组件,自己遍历自己

--nav-menu

:leftMenusitem.children/nav-menu/el-submenu!--

一级导航

通过判断当前活跃的路由path是否等于对应的左侧导航栏的key来实现默认第一个高亮以及处理一刷新高亮复原问题

--el-menu-item

:style$route.pathitem.key?color:#ffd04b:i

slottitle{{

{};},props:[leftMenus],methods:

{},