Element el-menu中NavMenu的用法
更新时间：2023年04月13日 11:19:20 作者：优雅的王德奥
今天封装一个导航栏的组件,使用的Element的NavMenu组件。遇到一个问题，本文主要介绍了Element el-menu中NavMenu的用法，感兴趣的可以了解一下
最近在使用Element开发时 一开始按照官网示例 产品前期没什么问题 到了后期 遇到这样一个情况：并不是只有点击导航栏才跳转页面
需求：
如果根据官网的示例，每个el-menu-item的index都为’1-1’ '1-2’之类的。如果直接跳转路由，你会发现导航栏当前激活菜单的 index没有改变。点击跳转。但菜单栏依旧停留在分组这个栏目
只有两种方法可以解决这个问题：
- 通过子组件的this.$emit方法触发父组件绑定的事件，改变default-active属性值
- 通过vuex储存el-menu的default-active属性值，在子组件的点击事件改变这个属性值
但是我试了第一种方法，没有生效。可能需要watch这个变量才能响应。这两种方法可能比较麻烦，后来发现一个很有效的方法。废话不多说。代码如下
正确用法：
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
:collapse="isCollapse"
router
overflow-y:
scroll
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">账号管理</span>
</template>
<el-menu-item index="/demo/index">列表</el-menu-item>
<el-menu-item index="/demo/group/index">分组</el-menu-item>
</el-submenu>
</el-menu>总结：
将default-active设置为$route.path，el-menu-item的index设为要跳转的路由（并且点击菜单项，会直接push到点击的页面)。注意：一定要设置el-submenu的index属性（1，2，3…）。不然会出bug
这样就无需关心default-active的属性值了。只要路由改变了，对应的菜单项也会激活
到此这篇关于Element el-menu中NavMenu的用法的文章就介绍到这了,更多相关el-menu NavMenu内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
这篇文章主要介绍了解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue中保留字符串中的空格的解决方案，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要为大家详细介绍了如何基于Vue2实现数字纵向滚动效果,从而达到显示计时器滚动效果,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
详解如何在vue项目中使用eslint+prettier格式化代码
在开发中我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格，这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码，需要的朋友可以参考下2018-11-11
axios上传文件错误:Current request is not a multipart request
最近工作中使用vue上传文件的时候遇到了个问题,下面这篇文章主要给大家介绍了关于axios上传文件错误:Current request is not a multipart request解决的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了如何使用Vue实现带拖动和播放功能的时间轴,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
Vue的watch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vue的watch和computed方法的使用及区别,需要的朋友可以参考下2018-09-09
element-plus提供了uploader组件，但是不好定制化。所以本文将利用Vue3和element-plus实现一个图片上传的组件，感兴趣的可以了解一下2022-03-03
最新评论