Vue实战【调整Vue-element-admin中的菜单栏，并添加顶部模块菜单栏】

🌟前言

因为最近在整合公司的项目，需要把所有系统里的功能集成到一个项目里，这样就导致菜单栏目录会特别的多，不便于用户使用，体验效果极差。于是想到了一个方法，就是增加顶部导航栏，点击的时候让侧边菜单栏在显示相对应模块的所有菜单；这样的话就可以很大程度提升我们的用户体验啦。

🌟小伙伴们先看

🌟实现思路

嗯，干活前一定要先把思路理清楚，记在小本本上，画个图都行哈哈

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

我这边用的是第一种方式，登陆的时候获取全部的存在vuex里，每次点击的时候再去处理相应的数据；小伙伴们也可以尝试一下第二种方式哦。

🌟具体代码

话不多说，直接开整。。。

javascript"><!--src/layout/***ponents/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.***/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 '@/***ponents/Breadcrumb'
import Hamburger from '@/***ponents/Hamburger'

export default {
  ***ponents: {
    Breadcrumb,
    Hamburger
  },
  ***puted: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ]),
    toIndex() { // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
      return '/' + this.$route.path.split('/')[1]
    }
  },
  // eslint-disable-next-line vue/order-in-***ponents
  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({ ***mit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        ***mit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
  
  //定义两个actions 方法用来执行我们上边定义的SET_MENULIST和SET_PATH
  setMenuList({ ***mit }, menuList) {
    ***mit('SET_MENULIST', menuList)
  },
  setPath({ ***mit }, path) {
    ***mit('SET_PATH', path)
  },

  // get user info
  getInfo({ ***mit, 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

        ***mit('SET_NAME', name)
        ***mit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ ***mit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        ***mit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ ***mit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      ***mit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

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

<!--src/layout/***ponents/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 {
  ***ponents: { SidebarItem, Logo },
  ***puted: {
    ...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-***ponents
  data() {
    return {
      menuList: []
    }
  }
}
</script>

🌟最后

当我们接到新需求的时候，一定要仔细分析把逻辑梳理清楚了；复杂的话我们可以画一下流程图以便我们更好的去写代码；万变不离其宗，思路最重要。小伙伴们如果有更好的思路，可以一起交流，共同进步。

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！