在上一张的Element中获取接口
views下IndexView.vue:
<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>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
navList:[]
};
},
created:function(){
this.getNaviList()
},
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>
<style scoped>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
main.js文件：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style lang="scss">
</style>
view下UsersView.vue：
<template>
<div>
<h1>用户列表</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
//有多个侧边栏，在此只展示一个代码
效果图：
代码展示：
