推荐 网站空间,亿网通官网,网站读取速度慢,高端企业网站建站程序需求#xff1a;点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。
点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件#xff0c;使用递归组件实现渲染等#xff0c;具体的优化可以看下面的注释…需求点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。
点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件使用递归组件实现渲染等具体的优化可以看下面的注释即可。
//顶部导航栏
templatedivstyledisplay: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;div classtop_div1imgsrc../assets/logo.pngaltlogstylewidth: 50px; height: 60px/div stylewidth: 100px后台管理系统/div/divdiv stylewidth: 450px; box-sizing: border-boxel-menu:default-activeactiveIndex2modehorizontalselecthandleSelectbackground-color#545c64text-color#fffactive-text-color#ffd04bclasstop_div2el-menu-item:indexString(index)v-for(item, index) in lists:keyindex{{ item.name }}/el-menu-itemel-submenu index4template slottitle我的工作台/templateel-menu-item index4-1设置/el-menu-itemel-menu-item index4-2退出/el-menu-item/el-submenu/el-menu/div/div
/templatescript
import { mapMutations } from vuex;
export default {name: showTop,data() {return {num: 0,//导航栏高亮activeIndex2: null,// 假设这是请求回来的数据lists: [{name: 首页,id: 0,leftMenus: [{id: 1,title: 用户管理,key: /user,name: user,rights: [view, edit, add, delete],},{id: 2,title: 商品管理,key: /products,name: products,children: [{id: 21,title: 品类管理,key: /categroy,name: categroy,rights: [view, edit, add, delete],},{id: 22,title: 商品生产,key: /product,name: product,rights: [view, edit, add, delete],},],},{id: 3,title: 角色管理,key: /sex,name: sex,rights: [view, edit, add, delete],},],},{name: 商品,id: 1,leftMenus: [{id: 1,title: 用户管理2,key: /user2,name: user2,rights: [view, edit, add, delete],},],},{name: 订单,id: 2,},{name: 会员,id: 3,},{name: 设置,id: 4,},],};},mounted() {// 调整高亮设置实现刷新不复原if (localStorage.getItem(activeIndex2)) {this.activeIndex2 localStorage.getItem(activeIndex2);} else {this.activeIndex2 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]),// 顶部导航栏点击事件handleSelect(key, keyPath) {console.log(key, keyPath);// 解决element ui组件库中顶部导航栏刷新高亮复原问题也可存储在vuex中if (key ! 4-2) {localStorage.setItem(activeIndex2, String(this.lists[key].id));// console.log(aaa,this.lists[key].leftMenus)if (this.lists[key].leftMenus) {// 拿到所点击的导航栏的leftMenus,并存储在vuex中,然后在AsideLeft中拿到该数据this.setLeftMenus(this.lists[key].leftMenus);//点击顶部导航栏跳转到对应的左侧导航栏的第一个路由上this.$router.push({ name: this.lists[key].leftMenus[0].name });//实现点击首页回到welcome页面if(key 0){this.$router.push({ name: welcome });}// 将key存储用来控制刷新左侧导航栏展示问题localStorage.setItem(key,key)}}// 判断是否是退出按钮if (key 4-2) {// 清空本地缓存的tokenlocalStorage.removeItem(token);// 清除所有本地缓存localStorage.clear()// 跳转至登录页this.$router.push({ name: login });}},},
};
/scriptstyle
.top_div1 {height: 60px;display: flex;flex-direction: row;
}
.top_div2 {display: flex;flex-direction: row;flex-wrap: nowrap;
}
/style//左侧导航栏父组件
templatediv!-- 动态设置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
import Aside_demo from ../components/Aside_demo.vue;
import { mapState } from vuex;
export default {name: AsideLeft,data() {return {};},computed: {...mapState([leftMenus]),},components: {Aside_demo,},methods: {},
};
/scriptstyle
.el-menu {width: 200px;
}
/style//左侧导航栏子组件
templatedivdiv v-for(item, index) in leftMenus :keyindex!-- 多级导航 --!-- 这里设置动态key值解决高亮问题,也可实现路由跳转 ,并通过设置v-if来判断数据有无二级菜单数据以此来展示二级菜单--el-submenu :indexitem.key v-ifitem.childrentemplate slottitlei classel-icon-location/ispan{{ item.title }}/span/template!-- 这里使用递归组件,用来遍历多级菜单将children数据传给递归组件,自己遍历自己 --nav-menu :leftMenusitem.children/nav-menu/el-submenu!-- 一级导航 --!-- 通过判断当前活跃的路由path是否等于对应的左侧导航栏的key来实现默认第一个高亮以及处理一刷新高亮复原问题 --el-menu-item :indexitem.key v-else :style$route.pathitem.key?color:#ffd04b:i classel-icon-menu/ispan slottitle{{ item.title }}/span/el-menu-item/div/div
/templatescriptexport default {// 注意使用递归组件name值就要改变了name: NavMenu,data() {return {};},props:[leftMenus],methods: {},
};
/scriptstyle/style
