<template>
<!-- 100vh全屏展示 -->
<el-container style="height: 100vh; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- <el-menu :default-openeds="['1', '3']"> 表示默认展开第几个菜单 -->
<!-- 1对应了el-submenu index="1" -->
<el-menu :default-openeds="['1']" :router="true"><!-- 把router属性改成true才能实现点击跳转 -->
<!-- index接收的是字符串类型,(i+1)是数字类型,所以使用toString方法转成字符串,传给index -->
<!-- 因为i是从0开始的 所以需要+1 -->
<el-submenu :index="(i+1).toString()" v-for="(v,i) in navList" :key="i">
<template slot="title"
><i class="el-icon-menu"></i>{{v.authName}}</template
>
<!-- <template slot="title">分组一</template> -->
<!-- el-menu-item index="1-1" 表示第一个导航里面的第一个子项 -->
<!-- 子选项需要改成例如: 1-1格式 以字符串的形式传给index属性 -->
<!-- 因为子选项也是一个数组所以需要再次循环 -->
<el-menu-item :index="'/index/'+item.path" v-for="(item,index) in v.children" :key="index">{{item.authName}}</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
</template>
调取接口
methods:{
getNaviList:function(){
axios.get('http://timemeety*****************',{
headers:{
'Authorization':localStorage.token
}
})
.then(res=>{
console.log(res);
let {data,meta} = res.data;
/* 数据获取成功 */
if(meta.status==200){
this.navList = data
}else{
/* 防止数据获取失败给出相应的后台提示 */
this.$message.error(meta.msg)
}
})
.catch(err=>{
console.log(err);
})
}
}
};
</script>
效果图：
代码展示：
