在上一張的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>
//有多個側邊欄，在此只展示一個代碼
效果圖：
代碼展示：
