vue Element-ui NavMenu导航菜单Menu Methods与Menu Events的坑

Element-ui 导航菜单Menu Methods与Menu Events的踩坑日记及解决方案

项目最初的想法是省略首页/的菜单配置 默认是首页 但当使用面包屑跳转到 首页的时候 路由切换回去菜单没有合并

下面是示例图

此时想到的解决方案是 监听路由变化 this.$route.path === '/' 的时候 调用elm组件事件 关闭菜单 这是错误的 此处有坑
element 组件说明示例图如下
比较坑的就是 element ui的事件是通过@close="xxx"触发
错误用法 踩坑此时调用成功但是不生效

 <el-menurouter:collapse="!isCollapse":collapse-transition="false"background-color="#002033":default-active="$route.path"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"text-color="#fff"active-text-color="#ffd04b"unique-opened>
el-menu>

  watch: {$route () {console.log(this.$route.path)if (this.$route.path === '/') {//当路径为首页的时候 关闭此时打开的menu this.handleClose(this.KeyIndex)}}},methods: {// sub-menu 展开的拿到indexhandleOpen (key) {console.log('我是打开index', key)this.KeyIndex = key},// 使用index 关闭指定的sub-menuhandleClose (key) {console.log(key)}}

正确方法
接下来看一下 element 的 方法调用是要绑定ref="menu"

 <el-menuref="menu"router:collapse="!isCollapse":collapse-transition="false"background-color="#002033":default-active="$route.path"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"text-color="#fff"active-text-color="#ffd04b"unique-opened>
el-menu>

  watch: {$route () {console.log(this.$route.path)if (this.$route.path === '/') {this.$refs.menu.close(this.KeyIndex)}}},methods: {handleOpen (key) {console.log('我是打开index', key)this.KeyIndex = key}}

组件方法使用说明

最后效果图

整体概括:监听路由-关闭菜单 思路是对的 但是要记得闭坑方法与事件使用的区别

!!!最后emelent组件事件的用法是@去绑定的 而方法是通过ref操作的望大家谨记不要犯和我一样的错误!!!

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！