AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-04-16 899
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue实战【调整Vue-element-admin中的菜单栏，并添加顶部模块菜单栏】

🌟前言

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

🌟小伙伴们先看image.gif🌟实现思路

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

  • 布局方面我需要在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>

🌟最后

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


文章标签：
JavaScript
UED
网络架构
关键词：
模块VUE.js
vue模块VUE.js
vue实战VUE.js
VUE.js实战
vue菜单栏VUE.js
忆凡
目录
相关文章
游客zi3qmblbcdexu
|
2天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
15 6
游客zi3qmblbcdexu
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
16 5
大树营养快线
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
39 4
dufadayang
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽，你可以更好地组织和定制组件的模板结构，使组件更具灵活性和可复用性。同时，具名插槽也有助于提高代码的可读性和可维护性。
dufadayang
13 2
dufadayang
|
8天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性，使你能够根据具体需求在组件中插入不同的内容，同时保持组件的结构和样式的一致性。
dufadayang
12 2
我是快乐的嘟嘟
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术，它允许将不同的微前端模块组合在一起，形成一个统一的应用。在 vite+vue 项目中，使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍，相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦，包括安装、配置和使用等方面。在实际开发中，你可以根据自己的需求和项目的特点，灵活地使用模块联邦，提高项目的可维护性和扩展性。
我是快乐的嘟嘟
23 1
李一花
|
Web App开发 JSON JavaScript
Vue 实战 (一) -- Vue 基础总结
Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面:1.数据绑定2.指令3.组件4.事件5.过滤器
李一花
2437 0
我是快乐的嘟嘟
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
106 63
dufadayang
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR（服务端渲染）预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制，实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展，Vue SSR 预渲染技术也将不断完善和创新，以适应不断变化的互联网环境和用户需求。
dufadayang
28 9
大树营养快线
|
9天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素，包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整，可以最大限度地发挥 Tree shaking 的优势，为 Vue 项目带来更好的性能和用户体验。
大树营养快线
13 2