vue-element-admin改造顶部一级导航，侧边二级导航

本项目是基于vue-element-admin的基础模板vue-admin-template进行改造的，因为实际项目很多会用到顶部导航菜单和侧边导航相结合的情况，为了满足这种需求做了改造。

先上效果图：

改造过程：

主要涉及2个地方，在layout里加了一个Topbar组件，store里加了个permission用于存储侧边导航。

Topbar

位置： src/layout/components/Topbar.vue

主要思路就是把路由第一个拿出来，作为顶部导航，然后点击时，把当前选中的子项路由存在store中以便侧边导航使用。

<template><div class="top-nav"><div class="log">带一级导航的后台管理系统</div><el-menu:active-text-color="variables.menuActiveText":default-active="activeMenu"mode="horizontal"@select="handleSelect"><div v-for="item in routes" :key="item.path" class="nav-item"><app-link :to="resolvePath(item)"><el-menu-itemv-if="!item.hidden":index="item.path">{{ item.meta ? item.meta.title : item.children[0].meta.title }}</el-menu-item></app-link></div></el-menu><div class="right-menu"><el-dropdown class="avatar-container" trigger="click"><div class="avatar-wrapper"><img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"><i class="el-icon-caret-bottom" /></div><el-dropdown-menu slot="dropdown" class="user-dropdown"><router-link to="/"><el-dropdown-item>Home</el-dropdown-item></router-link><a href="https://github.com/PanJiaChen/vue-admin-template/" target="_blank"><el-dropdown-item>Github</el-dropdown-item></a><a href="https://panjiachen.github.io/vue-element-admin-site/#/" target="_blank"><el-dropdown-item>Docs</el-dropdown-item></a><el-dropdown-item divided @click.native="logout"><span style="display:block;">Log Out</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div></div>
</template><script>
import { mapGetters } from 'vuex'
import AppLink from './Sidebar/Link'
import { constantRoutes } from '@/router'
import variables from '@/styles/variables.scss'
import { isExternal } from '@/utils/validate'export default {name: 'Topbar',components: {AppLink},data() {return {routes: constantRoutes}},computed: {activeMenu() {const route = this.$routeconst { 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},...mapGetters(['avatar'])},mounted() {this.initCurrentRoutes()},methods: {// 通过当前路径找到二级菜单对应项，存到store，用来渲染左侧菜单initCurrentRoutes() {const { path } = this.$routelet 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.redirectreturn path}// 如果有子项，默认跳转第一个子项路由let path = ''/*** item 路由子项* parent 路由父项*/const getDefaultPath = (item, parent) => {// 如果path是个外部链接（不建议），直接返回链接，存在个问题：如果是外部链接点击跳转后当前页内容还是上一个路由内容if (isExternal(item.path)) {path = item.pathreturn}// 第一次需要父项路由拼接，所以只是第一个传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}`)}}
}
</script>

permission

位置： src/store/modules/permission.js

主要就是存储下选中的一级导航，用来渲染侧边导航。

import { constantRoutes } from '@/router'const state = {routes: [],addRoutes: [],currentRoutes: {}
}const mutations = {SET_CURRENT_ROUTES: (state, routes) => {state.currentRoutes = routes}
}export default {namespaced: true,state,mutations
}

最后就是要修改下里的routes，设置为当前选中路由的子路由

routes() {// return this.$router.options.routesreturn this.$store.state.permission.currentRoutes.children
},

中间还有一些细节比如侧边导航和收缩图标的显示隐藏，可以自行下载源码查看。

代码仓库地址：
我的码云仓库

vue-element-admin改造顶部一级导航，侧边二级导航相关推荐

vue-element-admin改造顶部一级导航，侧边二级导航+权限路由
vue-element-admin改造顶部一级导航,侧边二级导航+权限路由前言步骤 src/permission.js src/store/modules/permission.js src/st ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue-element-admin改造顶部一级导航，侧边二级导航

先上效果图：

改造过程：

vue-element-admin改造顶部一级导航，侧边二级导航相关推荐

最新文章

热门文章