1. 全栈程序员必看首页

vue elementui navmenu 多级导航菜单(水平、垂直)

全栈程序员-站长 • • 未分类 • 阅读 87

vue elementui navmenu 多级导航菜单(水平、垂直)vueelementuinavmenu多级菜单效果图组件<template><divclass="navMenu&am

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

文章目录

vue elementui navmenu 多级导航菜单

路由跳转(一)

  • el-menu标签中的router
参数 说明 类型 可选值 默认值
router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 boolean — false

<el-menu router>
组件(NavMenu.vue) 中的路由跳转,:index="navMenu.entity.name"
:default-active="activeIndex"中的activeIndex默认值也要是.entity.name的值
此时菜单数据中的value 没有用到,可以删除。

在这里插入图片描述
注意路由变化

组件（NavMenu.vue）

<template>
  <div class="navMenu">

    <template v-for="navMenu in navMenus">
        <!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" >
        <i :class="navMenu.entity.icon"></i>
        <span slot="title">{
  
  {navMenu.entity.alias}}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
        <template slot="title">
          <i :class="navMenu.entity.icon"></i>
          <span> {
  
  {navMenu.entity.alias}}</span>
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.childs"></NavMenu>
      </el-submenu>
    </template>

  </div>
</template>

<script> export default { 
     name: 'NavMenu', props: ['navMenus'], data() { 
     return { 
    } }, methods: { 
    } } </script>

<style> </style>

调用（app.vue）

<template>
  <div>
    <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="activeIndex" router >
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script> import NavMenu from "./components/NavMenu.vue"; export default { 
     components: { 
     NavMenu: NavMenu }, data() { 
     return { 
     activeIndex: 'aa', menuData: [ { 
     //一级 entity: { 
     id: 0, name: "aa", icon: "el-icon-message", alias: "一级菜单" } }, { 
     //一级 entity: { 
     id: 1, name: "systemManage", icon: "el-icon-message", alias: "两级菜单" }, //二级 childs: [ { 
     entity: { 
     id: 3, name: "authManage", icon: "el-icon-loading", alias: "权限管理", value: { 
     path: "/hello" } } }, { 
     entity: { 
     id: 4, name: "roleManage", icon: "el-icon-bell", alias: "角色管理", value: "/system/role" } }, { 
     entity: { 
     id: 2, name: "menuManage", icon: "el-icon-edit", alias: "菜单管理", value: "/system/menu" } }, { 
     entity: { 
     id: 5, name: "groupManage", icon: "el-icon-mobile-phone\r\n", alias: "分组管理", value: "/system/group" } } ] }, { 
     //一级 entity: { 
     id: 6, name: "userManage", icon: "el-icon-news", alias: "三级菜单" }, //二级 childs: [ { 
     entity: { 
     id: 7, name: "accountManage", icon: "el-icon-phone-outline\r\n", alias: "帐号管理", value: "" }, //三级 childs: [ { 
     entity: { 
     id: 14, name: "emailManage", icon: "el-icon-sold-out\r\n", alias: "邮箱管理", value: "/content/email" } }, { 
     entity: { 
     id: 13, name: "passManage", icon: "el-icon-service\r\n", alias: "密码管理", value: "/content/pass" } } ] }, { 
     entity: { 
     id: 8, name: "integralManage", icon: "el-icon-picture", alias: "积分管理", value: "/user/integral" } } ] }, { 
     //一级 entity: { 
     id: 40, name: "contentManage", icon: "el-icon-rank", alias: "四级菜单" }, //er级 childs: [ { 
     entity: { 
     id: 41, name: "classifyManage2", icon: "el-icon-printer", alias: "分类管理" }, //三级 childs: [ { 
     entity: { 
     id: 42, name: "classifyManage3", icon: "el-icon-printer", alias: "分类管理" }, //四级 childs: [ { 
     entity: { 
     id: 43, name: "classifyManage4", icon: "el-icon-printer", alias: "分类管理", value: "/content/classify" } } ] } ] } ] } ] }; } }; </script>

<style> </style>

路由跳转(二)

  • Menu-Item Attribute
参数 说明 类型 可选值 默认值
route Vue Router 路径对象 Object — —

此方法要同时设置<el-menu router>,否则无效

组件(NavMenu.vue) 中的路由跳转,:route="navMenu.entity.value"
:index="navMenu.entity.name"只是唯一标识,与:default-active="activeIndex"中的activeIndex是对应的

NavMenu.vue的<el-menu-item中加上:route="navMenu.entity.value"

<!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value" >

此时效果图(路由变化)
在这里插入图片描述

参考文章

水平效果图

在这里插入图片描述

区别

  1. 调用时在 app.vue 文件中 <el-menu>中添加 mode="horizontal"
  2. 此时样式并不完全是水平样式,，因为我们的组件NavMenu.vue中嵌套了一层div（组件template下必须有一个跟标签），导致elementui 的样式发生变化，因为它调用的方式是（ .el-menu–horizontal>.el-submenu）用了>子元素选择器。
    所以要在 NavMenu.vue中添加样式
    如果是克隆的代码 ，请注意将<el-menu> 中的style样式去掉
/* 水平样式 */
 .el-menu--horizontal>div>.el-submenu { 
   
    float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal>div>.el-menu-item { 
   
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal>div>.el-submenu .el-submenu__icon-arrow { 
   
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal>div>.el-submenu .el-submenu__title { 
   
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    color: #909399;
}

在这里插入图片描述
图1(看上述代码)
在这里插入图片描述
图2(看上述代码)

问题

1 刷新页面

  • 刷新页面时,如果路由为非active路由,激活路由与实际路由不符合(因为页面路由不变,但是activeIndex变成默认值)
    App.vue中添加这段代码,刷新后重置到默认的路由
mounted(){
    this.$router.push('/')
  }

2 非最后一层,点击可跳转路由

在这里插入图片描述

默认的路由跳转是此级菜单中的最后一层可跳转，若想其他层也可跳转，可进行如下设置

NavMenu.vue 中,在<el-submenu>中添加@click.native="goto(navMenu.entity.value)"

goto(path){ 
   
        if(path){ 
   
          this.$router.push(path)
        }
      }

如果哪个目录不可跳转路由,可将其设置value='',但是不能没有value这个值。
但是，由此引发一个问题就是，点击后，虽然路由跳转,但是没有当前路由激活样式。（因为elementui的默认样式只有在最后一层）
在这里插入图片描述
观察路由变化,点击无变化的是设置value=''

有其他方案,也可提供给我,谢谢!

3 水平菜单点击多路由时，有轮廓

在这里插入图片描述
简单粗暴的解决方法

// NavMenu.vue
<style scoped> *{ 
     outline:none; } </style>

4 刷新不折叠导航

在app.vue中添加

mounted(){ 
   
	let start = window.location.href.lastIndexOf('/');
	let path = window.location.href.slice(start+1);
	this.activeIndex = path;
}

主要是在刷新是获取浏览器地址 截取对应的路由 当前激活菜单的 index 重新设置即可 :default-active=“activeIndex”，
这里的activeIndex 和路由一致都是 entity.name

在这里插入图片描述

5 水平菜单过长，可滚动

添加两个style 样式在对应的位置，但是这样的话，水平菜单中有下拉菜单，并且超过页面宽度，会点不到,所以你设置的宽度要大于展开所有下拉的宽度。
这个的宽度，你可以根据你有多少个菜单项 或者是当前窗口的宽度，计算后赋值给width

<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="activeIndex" router mode="horizontal" style="overflow-x:auto;" >
      <NavMenu :navMenus="menuData" style="width:800px;overflow-x:auto;"></NavMenu>
    </el-menu>

在这里插入图片描述

6 垂直菜单过长，可滚动

<el-menu ... style="height:100vh;width:230px;float:left;overflow-y:auto;">
...
</el-menu>

在这里插入图片描述

git项目地址
在线演示地址

另一篇我的关于多级导航菜单的博客
elementui通过routerl配置多级导航菜单

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159436.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2022年7月26日 下午12:36
下一篇 2022年7月26日 下午12:36


相关推荐

  • qoder怎么使用claude4 Midjourney

    qoder怎么使用claude4

    qoder怎么使用claude4

    Ai探索者的头像 Ai探索者
    2026年3月15日
    2
  • 不止一个背包的背包问题_分组背包问题

    不止一个背包的背包问题_分组背包问题

    不止一个背包的背包问题_分组背包问题有 N 种物品和一个容量是 V 的背包。物品一共有三类：第一类物品只能用1次（01背包）；第二类物品可以用无限次（完全背包）；第三类物品最多只能用 si 次（多重背包）；每种体积是 vi，价值是 wi。求解将哪些物品装入背包，可使物品体积总和不超过背包容量，且价值总和最大。输出最大价值。输入格式第一行两个整数，N，V，用空格隔开，分别表示物品种数和背包容积。接下来有 N 行，每行三个整数 vi,wi,si，用空格隔开，分别表示第 i 种物品的体积、价值和数量。si=−1 表示第 i 种

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月9日
    13
  • 数独答案查询器_8阶数独

    数独答案查询器_8阶数独

    数独答案查询器_8阶数独数独是一种传统益智游戏，你需要把一个 9×9 的数独补充完整，使得图中每行、每列、每个 3×3 的九宫格内数字 1∼9 均恰好出现一次。请编写一个程序填写数独。输入格式输入包含多组测试用例。每个测试用例占一行，包含 81 个字符，代表数独的 81 个格内数据（顺序总体由上到下，同行由左到右）。每个字符都是一个数字（1−9）或一个 .（表示尚未填充）。您可以假设输入中的每个谜题都只有一个解决方案。文件结尾处为包含单词 end 的单行，表示输入结束。输出格式每个测试用例，输出一行数据，代表填充

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月8日
    9
  • PyCharm单行多行代码注释快捷键

    PyCharm单行多行代码注释快捷键

    PyCharm单行多行代码注释快捷键多行注释选中代码后快捷键 Ctrl 单行注释选中代码或者光标停留在该行 然后使用快捷键 Ctrl 多行代码缩进选中代码后 快捷键 Tab 多行代码取消缩进选中代码后 快捷键 shift Tab

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月18日
    3
  • 操作系统分为用户态和内核态_内核态 用户态

    操作系统分为用户态和内核态_内核态 用户态

    操作系统分为用户态和内核态_内核态 用户态这节课给你带来了一道非常经典的面试题目：用户态线程和内核态线程有什么区别？这是一个组合型的问题，由很多小问题组装而成，比如：用户态和内核态是什么？用户级线程和内核级线程是一个怎样的对应关系？内核响应系统调用是一个怎样的过程？……而且这个问题还关联到了我们后面要学习的多线程、I/O模型、网络优化等。所以这是一道很不错的面试题目，它不是简单考某个概念，而是通过让求职者比较两种东西，从而考察你对知识整体的认知和理解。今天就请你顺着这个问题，深入学习内核的工作机制，和我一起去理解用户

    全栈程序员-站长的头像 全栈程序员-站长
    2025年12月12日
    5
  • ORACLE最大进程数

    ORACLE最大进程数

    ORACLE最大进程数

    全栈程序员-站长的头像 全栈程序员-站长
    2021年7月30日
    59

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号