深圳网站制作公司电话,asp.net 大型网站开发,网站排名优化平台,赣州梦幻网络科技有限公司基于vue-element-admin的顶部一级导航栏的调整#xff0c;因为一级路由过多导致其他元素被挤到第二行#xff0c;故现在将原来一级路由数组拆分成两个数组#xff0c;第二个数组以子菜单显示 关键处调整代码
html
el-menu:active-text-colorvariables.menuActiv… 基于vue-element-admin的顶部一级导航栏的调整因为一级路由过多导致其他元素被挤到第二行故现在将原来一级路由数组拆分成两个数组第二个数组以子菜单显示 关键处调整代码
html
el-menu:active-text-colorvariables.menuActiveText:default-activeactiveMenumodehorizontalselecthandleSelectdiv v-foritem in displayedRoutes :keyitem.path classnav-itemapp-link :toresolvePath(item)el-menu-item v-if!item.hidden :indexitem.pathi:classitem.meta item.meta.icon ? item.meta.icon : el-icon-house/i{{item.meta ? item.meta.title : item.children[0].meta.title}}/el-menu-item/app-link/divel-submenu v-ifhiddenRoutes.length 0 indexcolltemplate slottitlei classel-icon-more/i/templatediv v-foritem in hiddenRoutes :keyitem.path classnav-itemapp-link :toresolvePath(item)el-menu-item v-if!item.hidden :indexitem.pathi:classitem.meta item.meta.icon ? item.meta.icon : el-icon-house/i{{item.meta ? item.meta.title : item.children[0].meta.title}}/el-menu-item/app-link/div/el-submenu/el-menu
js
export default {name: Topbar,components: {AppLink,},data() {return {activeIndex: 1,logo: titlePng,// avatar: sessionStorage.getItem(avatar),routes: constantRoutes,};},computed: {...mapGetters([permission_routes, async_routes, avatar]),activeMenu() {const route this.$route;const { meta, path } route;// if set path, the sidebar will highlight the path you setif (meta.activeMenu) {return meta.activeMenu;}// 如果是首页首页高亮if (path /dashboard) {return /;}// 如果不是首页高亮一级菜单const activeMenu / path.split(/)[1];return activeMenu;},variables() {return variables;},sidebar() {return this.$store.state.app.sidebar;},displayedRoutes() {// 这里可以根据需要定义展示的路由项return this.routes.slice(0, 9); // 例如展示前 9 个路由},hiddenRoutes() {// 返回剩余的路由项const hidden this.routes.slice(9); // 省略的路由项return hidden.length 0 ? hidden : []; // 只有在有省略项时返回},},watch: {activeMenu(newVal, oldVal) {this.handleSelect(newVal);},},mounted() {this.initCurrentRoutes();},methods: {// 通过当前路径找到二级菜单对应项存到store用来渲染左侧菜单initCurrentRoutes() {this.$router.addRoutes(this.async_routes);this.routes this.permission_routes; // 动态路由赋值const { path } this.$route;let route this.routes.find((item) item.path / path.split(/)[1]);// 如果找不到这个路由说明是首页if (!route) {route this.routes.find((item) item.path /);}this.$store.commit(permission/SET_CURRENT_ROUTES, route);this.setSidebarHide(route);},// 判断该路由是否只有一个子项或者没有子项如果是则在一级菜单添加跳转路由isOnlyOneChild(item) {if (item.children item.children.length 1) {return true;}return false;},resolvePath(item) {// 如果是个完成的url直接返回if (isExternal(item.path)) {return item.path;}// 如果是首页就返回重定向路由if (item.path /) {const path item.redirect;return path;}// 如果有子项默认跳转第一个子项路由let path ;/*** item 路由子项* parent 路由父项*/const getDefaultPath (item, parent) {// 如果path是个外部链接不建议直接返回链接存在个问题如果是外部链接点击跳转后当前页内容还是上一个路由内容if (isExternal(item.path)) {path item.path;return;}// 第一次需要父项路由拼接所以只是第一个传parentif (parent) {path parent.path / item.path;} else {path / item.path;}// 如果还有子项继续递归if (item.children) {getDefaultPath(item.children[0]);}};if (item.children) {getDefaultPath(item.children[0], item);return path;}return item.path;},handleSelect(key, keyPath) {// 把选中路由的子路由保存storeconst route this.routes.find((item) item.path key);this.$store.commit(permission/SET_CURRENT_ROUTES, route);this.setSidebarHide(route);},// 设置侧边栏的显示和隐藏setSidebarHide(route) {if (!route.children || route.children.length 1) {this.$store.dispatch(app/toggleSideBarHide, true);} else {this.$store.dispatch(app/toggleSideBarHide, false);}},async logout() {await this.$store.dispatch(user/logout);this.$router.push(/login?redirect${this.$route.fullPath});},toggleFullScreen() {// 检查浏览器是否支持全屏 APIif (screenfull.isEnabled) {screenfull.toggle(); // 切换全屏模式} else {console.warn(该浏览器不支持全屏);}},},
};
/script 拆分逻辑是如果数组长度超过九个就拆分。如果想要根据不同浏览器窗口大小去拆分显示需要去监听浏览器的实时宽度计算整行所有元素的长度总和如果超出则将超出的路由加入子菜单中显示
