NavMenu 导航菜单
问题一:所有一级菜单同时展开关闭
答:给el-submenu 的index绑定独一无二的值
问题二:使用for循环遍历,会导致所有的图标都相同
答:在v-for循环遍历时,动态添加图标的解决方案:根据id生成对象!!
问题三:菜单被选中时,右侧会多出的边框线
答:给el-menu设置 border-right: none;
问题四:侧边栏路由的改造
答:Menu Attribute中有router属性,表示是否使用 vue-router 的模式,启用该模式会在激活导航时以最底层菜单的 index 作为 path 进行路由跳转,
小技巧:利用sessionstroage存储路径
<!-- 侧边栏菜单区域 -->
<!--注:active-text-color="#409EFF" 是激活的文本的颜色,(其实就是选中的文本的颜色)-->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
<!-- 一级菜单 -->
<!-- 注:要给index绑定独一无二的值,绑定同样的值会造成列表同时打开
index="item.id +'' 绑定时要在后边加空格,不然会疯狂报错
报错的原因是index只接收字符串,不接受数字-->
<!-- 注:不绑定:key="item.id" 会报错 -->
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单 -->
//获取到的数据中,路径是不带 / 的,所以要自己拼接一个 / 。
<el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<script>
export default {
data() {
return {
// 左侧菜单数据
menulist: [],
// 在v-for循环遍历时,动态添加图标的解决方案:根据id生成对象!!
iconsObj: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
},
//组件你被创建的时候会执行created生命周期函数
created() {
this.getMenuList()
this.activePath = window.sessionStorage.getItem('activePath')
},
methods: {
logout() {
window.sessionStorage.clear()
this.$router.push('/login')
},
// 获取所有的菜单
async getMenuList() {
const { data: res } = await this.$http.get('menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.menulist = res.data
console.log(res)
},
// 点击按钮,切换菜单的折叠与展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
},
// 保存链接的激活状态
saveNavState(activePath) {
window.sessionStorage.setItem('activePath', activePath)
this.activePath = activePath
}
}
}
}
</script>
<style>
.el-aside {
background-color: #333744;
.el-menu {
//取消菜单被选中时,右侧会多出的边框线
//默认状态是border-right:solide 1px #XXXX
border-right: none;
}
}</style>