vue关于NavMenu 导航菜单的相关问题总结

因为最近开发经常用到Element-ui中的Menu菜单组件，所以将自己踩过的坑总结一下

常用参数及方法：

1.1. el-menu 常用参数：

参数	说明	类型	可选值	默认值
background-color	菜单的背景色(仅支持hex格式)	string	无	#fff
text-color	菜单的文字颜色(仅支持hex格式)	string	无	#000
active-text-color	当前激活菜单的文字颜色(仅支持hex格式)	string	无	#409EFF
default-active	当前激活菜单的index	string	无	无
unique-opened	是否只保持一个子菜单的展开	boolean	无	false

1.2 . el-menu Methods方法 ：

方法名称	说明	参数
open	展开指定的sub-menu	index: 需要打开的sub-menu的index
close	收起指定的sub-menu	index: 需要收起的sub-menu的index

1.3 . el-menu Events事件：

方法名称	说明	参数
select	菜单激活的回调	index: 选中菜单项的index, indexPath: 选中菜单项的index path

1.4 . SubMenu Attribute常用参数：

参数	说明	类型	可选值	默认值
index	唯一标志	string/null	无	null
popper-class	弹出菜单的自定义类名	String	无	无
show-timeout	展开sub-menu的延时	number	无	300
hide-timeout	收起sub-menu的延时	number	无	300

1.5 Menu-Item Attribute常用参数：

参数	说明	类型	可选值	默认值
index	唯一标志	string/null	无	null
route	Vue Router路径对象	Object	无	无
disabled	是否禁用	boolean	无	false

NavMenu导航菜单例子

效果图如下：

具体代码说明如下：
因为是左侧菜单栏，所以这里创建了left.vue组件，再将其引用到main.vue文件中

<template>
    <el-aside  class="left-box">
            <el-menu
                :default-active="activerouter"
                class="el-menu-vertical-demo"
                background-color="#fff"
                :unique-opened='true'
                text-color="#000"
                active-text-color="#ffd04b"
                @select="handleSelect"
                @open="handleOpen"
                @close="handleClose">
                		<!-- submenu中每个menu的index值必须是唯一的 -->
                        <el-submenu   :index="menu.index" v-for="(menu,index) in memuData" :key="'a'+index" >
                            <template slot="title">
                            	<!-- 这里嵌套的是主菜单的name-->
                                <i :class="menu.icon"></i><span>{{menu.name}}</span>
                            </template>
                            <el-menu-item-group>
                            	<!-- 这里之所以加is-active类名是因为有时此类名在点击子菜单之后会被浏览器丢失，所以手动加上是为了以后修改被点击时子菜单的样式而设 -->
                            	<!-- menu中每个index值必须是唯一的，不能重复，具体可参考假数据中的index数值 -->
                                <el-menu-item :class="$route.path==item.path?'is-active':'el-menu-item'" :index="item.path" :key="index1" v-for="(item,index1) in menu.menuList" @click="checklast(item)">
                                    <div class="el-menu-item-div"><i :class="item.icon"></i>{{item.title}}</div>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
            </el-menu>
    </el-aside>
</template>
<script>
// import bus from "../bus.js"
export default {
    name:"Left",
    data(){
        return{
            // 假数据格式，如果菜单是动态生成的，则让接口按照此格式返回即可
            memuData:[
                {
                   name:'AAAA管理系统' ,
                   index:'1',
                   icon:'el-icon-notebook-2',
                   menuList:[
                        {
                            title: "分组一",
                            path:'/groupingOne',
                            index:'1-1',
                            icon:'el-icon-s-order'

                        },
                        {
                            title: "分组二",
                            path: "/groupingTwo",
                            index:'1-2',
                            icon:'el-icon-s-home'
                        },
                        {
                            title: "分组三",
                            path: "/groupingThree",
                            index:'1-3',
                            icon:'el-icon-notebook-1'
                        }, 
                        {
                            title: "分组四",
                            path: "/groupingFour",
                            index:'1-4',
                            icon:'el-icon-news'
                        }, 
                        {
                            title: "分组五",
                            path: "/groupingFive",
                            index:'1-5',
                            icon:'el-icon-link'
                        }, 
                   ]
                },
                {
                    name:'BBBB系统管理' ,
                    index:'2',
                    icon:'el-icon-discount',
                   	menuList：[]
                },
                {
                    name:"DDDD系统管理",
                    index:'3',
                    icon:'el-icon-files',
                    menuList：[]
                },
                {
                    name:"EEEE数据系统",
                    index:'4',
                    icon:'el-icon-document',
                    menuList:[]
                },
                {
                    name:"YYYYWWYYWW管理",
                    index:'5',
                    icon:'el-icon-tickets',
                    menuList:[
                        {
                            title: "AAAAAAAA",
                            path: "/AAAAAAA",
                            index:'5-1',
                            icon:'el-icon-s-order'
                        },
                        {
                            title: "AAAAAAAA",
                            path: "/BBBBBB",
                            index:'5-2',
                            icon:'el-icon-s-home'
                        }, 

                    ]
                }
            ],
        }
    },

    computed: {
    	// 监听当前菜单激活的index数值
        activerouter: function (index) {
                let _this = this;
                let acve = "";
                acve = _this.$route.path;
                return acve;
            },
    },
	// 路由监听
    watch:{
        $route: {
            handler:'resetData',
            deep:true
        }
    },
    mounted(){
        this.resetData()
    },
    methods:{
        resetData(){
            console.log('route',this.$route.path)
            // 在这里可以根据需求写具体的代码
        },
        handleSelect(){},
        handleOpen(){},
        handleClose(){},
        checklast(item) {
            // console.log('item ------ ',item)
            this.$router.push({path:item.path,query:item.query},);
        },
    }
}
</script>

然后将left.vue组件写入main.vue文件中，则对应的页面效果就会加载完成。

<template>
  <div class="main">
    <Header></Header>
    <el-container style="position: relative;">
        <Left></Left>
        <el-main class="main1">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </el-main>
    </el-container>
  </div>
</template>
<script>
import Header from "./Header.vue";
import Left from "./Left.vue";
export default {
  components: {
    Header,
    Left,
  },
  watch:{
    $route: {
      handler(val) {
        // console.log('watchroute',val)
      },
      deep: true,
      immediate: true
    }
  },
  mounted(){}
};
</script>

关于一些踩过的坑

1.submenu和menu中的index属性必须是唯一的且不能重复。
2.关于submenu和menu鼠标悬浮或者点击时的样式变化，主要涉及到两个属性 * is-opened 以及 is-active * 代码实现如下：

在这里插入代码片
<style scoped> 
	/* 菜单父级的hover（父级菜单）时背景颜色及字体 */
	::v-deep .el-submenu .el-submenu__title:hover {
		  background-color: #e7eef8 !important;
		  color: #3C77FE !important; 
		  font-weight: bold;
	}
	/* 子级菜单hover时背景颜色 */
	::v-deep .el-menu .el-menu-item:hover {
	  	  background-color: #e7eef8 !important;
	}
	/* 子级菜单hover时文字颜色 */
	::v-deep .el-menu .el-menu-item-div:hover{
    	 color: #3C77FE;
	}
	/* 菜单父级展开时的背景颜色变化 注意，这里有自带属性 is-opened必须加上  */
	::v-deep .el-submenu.is-opened .el-submenu__title{
	    background-color: #e7eef8 !important;
	}
	/* 菜单父级展开时的文字颜色变化 注意，这里有自带属性 is-opened必须加上  */
	::v-deep .el-submenu.is-opened .el-submenu__title span{
	    font-weight: bold;
	    color: #3C77FE;
	}
	/* 子级菜单展开被点击选中的时候字体颜色变化，这里的is-active属性被丢失，所以手动写判断添加 */
	::v-deep .el-menu .el-menu-item.is-active .el-menu-item-div{
    	color: #3C77FE !important;
	}
</style>