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 v-viewer组件使用示例详解(v-viewer轮播图)
这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
Vue项目打包部署到GitHub Pages的实现步骤
本文主要介绍了Vue项目打包部署到GitHub Pages的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
详解如何在Vue2中实现组件props双向绑定
在Vue2中组件的props的数据流动改为了只能单向流动，如何在Vue2中实现组件props双向绑定，一起来跟小编看看。
2017-03-03
vue3+ts使用bus事件总线的示例代码
这篇文章主要介绍了vue3+ts使用bus事件总线,文中给大家提到了vue总线机制(bus)的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
关于vue中使用three.js报错的解决方法
最近因为three.js的项目要用Vue.js,下面这篇文章主要给大家介绍了关于vue中使用three.js报错的解决方法,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
基于vue手动实现一个日历组件
这篇文章主要为大家详细介绍了如何基于vue手动实现一个日历组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
2024-01-01
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
这篇文章主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue2.x 从vue.config.js配置到项目优化
这篇文章主要介绍了vue2.x 从vue.config.js配置到项目优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vue router动态路由下让每个子路由都是独立组件的解决方案
这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-04-04
vue中的event bus非父子组件通信解析
本篇文章主要介绍了 vue中的event bus非父子组件通信解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10

Element el-menu中NavMenu的用法

总结：

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具