🌟前言

因为最近在整合公司的项目 
    
    
    ，需要把所有系统里的功能集成到一个项目里
     


     


     


，这样就导致菜单栏目录会特别的多 




 




 




，不便于用户使用 

   

   

   ，体验效果极差 
    
    
    。于是想到了一个方法
     

     

     

，就是增加顶部导航栏  




  




  




，点击的时候让侧边菜单栏在显示相对应模块的所有菜单；这样的话就可以很大程度提升我们的用户体验啦
     


     


     


。

🌟小伙伴们先看

🌟实现思路

嗯 


  


  


  ，干活前一定要先把思路理清楚
     
     
     
，记在小本本上   




   




   




，画个图都行哈哈

布局方面我需要在Navbar组件内添加一个导航组件以便我们去渲染顶部模块菜单； 因为是动态路由所以我们可以： 登录的时候让后端返回所有的当前用户下所有的菜单权限； 登录时候只返回默认显示的菜单 



 



 



 ，每次点击的时候再去获取相应的模块菜单权限 




 




 




。

我这边用的是第一种方式               ，登陆的时候获取全部的存在vuex里
    




    




    




，每次点击的时候再去处理相应的数据；小伙伴们也可以尝试一下第二种方式哦 

   

   

   。

🌟具体代码

话不多说














，直接开整
     

     

     

。  




  




  




。 


  


  


  。

<!--src/layout/components/Navbar.vue--> <template> <div class="navbar"> <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <!--重点一：顶部menu--> <el-menu mode="horizontal" default-active="/" @select="handleSelect" > <el-menu-item v-for="item in menuList" :key="item.path" class="menuItem" :index="item.path"> <icon :class="item.meta?item.meta.icon:" /> <span slot="title">{{ item.name }}</span> </el-menu-item> </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 target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/"> <el-dropdown-item>Github</el-dropdown-item> </a> <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/"> <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 Breadcrumb from @/components/Breadcrumb import Hamburger from @/components/Hamburger export default { components: { Breadcrumb, Hamburger }, computed: { ...mapGetters([ sidebar, avatar ]), toIndex() { // 根据路径绑定到对应的一级菜单                ，防止页面刷新重新跳回第一个 return / + this.$route.path.split(/)[1] } }, // eslint-disable-next-line vue/order-in-components data() { return { menuList: [ // 水平一级菜单栏的菜单 ] } }, mounted() { // 初始化菜单数据 this.initMenuList() }, methods: { // 重点二： // 因为整个项目工程比较大
     



     



     



，所以当时搭建了一个demo














，菜单数据我写在了本地； // 大家在实现的时候可以通过上边第一种方法; // 后台获取回来数据以后通过 router.addRoutes(获取回来的菜单数组)方法; // 动态的挂载到我们的router上
     
     
     
。 initMenuList() { const menuList = [/login, /404] this.menuList = this.$router.options.routes.filter((v, i) => { return v.path !== menuList[i] }) }, // 重点三： // 根据当前惦记的顶部模块菜单去切换左侧菜单栏,把当前点击的菜单path存在vuex里 // 我这边是存在了store/modules/user里边 
    
    
    ，这个没有要求
     


     


     


，小伙伴们随意 handleSelect(path) { this.$store.dispatch(user/setPath, path) }, toggleSideBar() { this.$store.dispatch(app/toggleSideBar) }, async logout() { await this.$store.dispatch(user/logout) this.$router.push(`/login?redirect=${this.$route.fullPath}`) } } } </script> <style lang="scss" scoped> .navbar { display: flex; justify-content: space-between; height: 50px; overflow: hidden; position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08); .hamburger-container { line-height: 46px; height: 100%; float: left; cursor: pointer; transition: background .3s; -webkit-tap-highlight-color:transparent; &:hover { background: rgba(0, 0, 0, .025) } } .breadcrumb-container { float: left; } .right-menu { float: right; height: 100%; line-height: 50px; &:focus { outline: none; } .right-menu-item { display: inline-block; padding: 0 8px; height: 100%; font-size: 18px; color: #5a5e66; vertical-align: text-bottom; &.hover-effect { cursor: pointer; transition: background .3s; &:hover { background: rgba(0, 0, 0, .025) } } } .avatar-container { margin-right: 30px; .avatar-wrapper { margin-top: 5px; position: relative; .user-avatar { cursor: pointer; width: 40px; height: 40px; border-radius: 10px; } .el-icon-caret-bottom { cursor: pointer; position: absolute; right: -20px; top: 25px; font-size: 12px; } } } } } .menuItem{ height: 47px; } </style> // src/store/modules/user import { login, logout, getInfo } from @/api/user import { getToken, setToken, removeToken } from @/utils/auth import { resetRouter } from @/router const getDefaultState = () => { return { token: getToken(), name: , avatar: , // 定义以下两个状态 menuList: [], // 动态路由 path: / // 当前点击的菜单模块path } } const state = getDefaultState() const mutations = { RESET_STATE: (state) => { Object.assign(state, getDefaultState()) }, SET_TOKEN: (state, token) => { state.token = token }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, // 定义SET_MENULIST方法用来保存我们的动态路由 SET_MENULIST: (state, menuList) => { state.menuList = menuList }, // 定义SET_MENULIST方法用来保存我当前点击的顶部模块菜单path SET_PATH: (state, path) => { state.path = path } } const actions = { // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username: username.trim(), password: password }).then(response => { const { data } = response commit(SET_TOKEN, data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, //定义两个actions 方法用来执行我们上边定义的SET_MENULIST和SET_PATH setMenuList({ commit }, menuList) { commit(SET_MENULIST, menuList) }, setPath({ commit }, path) { commit(SET_PATH, path) }, // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response if (!data) { return reject(Verification failed, please Login again.) } const { name, avatar } = data commit(SET_NAME, name) commit(SET_AVATAR, avatar) resolve(data) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { removeToken() // must remove token first resetRouter() commit(RESET_STATE) resolve() }).catch(error => { reject(error) }) }) }, // remove token resetToken({ commit }) { return new Promise(resolve => { removeToken() // must remove token first commit(RESET_STATE) resolve() }) } } export default { namespaced: true, state, mutations, actions }

动态菜单和path都存好了以后我们就可以根据当前点击的path去动态的渲染我们的侧边栏啦

<!--src/layout/components/Sidebar/index.vue--> <template> <div :class="{has-logo:showLogo}"> <logo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical" > <sidebar-item v-for="route in menuList" :key="route.path" :item="route" :base-path="route.path" /> </el-menu> </el-scrollbar> </div> </template> <script> import { mapGetters } from vuex import Logo from ./Logo import SidebarItem from ./SidebarItem import variables from @/styles/variables.scss export default { components: { SidebarItem, Logo }, computed: { ...mapGetters([ sidebar ]), routes() { return this.$router.options.routes }, activeMenu() { const route = this.$route const { meta, path } = route // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu } return path }, showLogo() { return this.$store.state.settings.sidebarLogo }, variables() { return variables }, isCollapse() { return !this.sidebar.opened } }, watch: { // 因为每次点击顶部菜单的时候path都会改变 




 




 




，所以我们要对它进行监听; // 通过数组的filter方法去过滤出来我们想要的菜单数组就可以啦   




   




   




。 $store.state.user.path: { handler: function(newVal, oldVal) { console.log(新值 + newVal, 旧值 + oldVal) console.log(vuex里存的菜单, this.$store.state.user.menuList) this.menuList = this.$store.state.user.menuList.filter(v => { return newVal === v.path }) } } }, mounted() { // 页面渲染时候获取一下vuex里的menuList 

   

   

   ，因为刚才在vuex里定义的path默认给了/; // 所以第一次进来的时候默认显示的首页 console.log(当前path, this.$store.state.user.path) this.$store.dispatch(user/setMenuList, this.$router.options.routes) this.menuList = this.$store.state.user.menuList.filter(v => { return this.$store.state.user.path === v.path }) }, // eslint-disable-next-line vue/order-in-components data() { return { menuList: [] } } } </script>

🌟最后

当我们接到新需求的时候
     

     

     

，一定要仔细分析把逻辑梳理清楚了；复杂的话我们可以画一下流程图以便我们更好的去写代码；万变不离其宗  




  




  




，思路最重要 



 



 



 。小伙伴们如果有更好的思路 


  


  


  ，可以一起交流
     
     
     
，共同进步               。

✨原创不易   




   




   




，还希望各位大佬支持一下！

👍 点赞 



 



 



 ，你的认可是我创作的动力！

⭐️ 收藏               ，你的青睐是我努力的方向！

✏️ 评论
    




    




    




，你的意见是我进步的财富！