主页制作
<template>
<el-container style="height: 100vh; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
:router="true使用vue-router模式，启动该模式会在激活导航时以index作为path进行路由跳转
<el-menu :default-openeds="['1']" :router="true"><!-- :default-openeds="['1']" 默认打开第一个菜单 -->
index接受的是字符串类型
<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>
el-submenu index="1-4" 表示把el-submenu当作是一个导航的第四个子项
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>admin</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import axios from "axios";
export default {
name: "IndexView",
data() {
return {
navList: [],
};
},
created() {
this.getNavList();
},
methods: {
getNavList() {
axios
.get("http://time*******.com:8889/api/private/v1/menus", {
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>
