- 导入element的布局容器组件
用于布局的容器组件，方便快速搭建页面的基本结构：
el-container：外层容器。当子元素中包含 el-header或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：主要区域容器。
el-footer：底栏容器。
rouer是否开启路由 通过index跳转
效果图：
注释:
<template> <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']" :router="true"> <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-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>
<script>
import axios from 'axios'
export default {
data() {
return {
navList:[],
openList:['1']
};
},
created:function(){
this.getNavList();
},
methods:{
getNavList:function(){
axios.get('',{
// 登录成功后会将token存入本地缓存，
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>
-
使用axios调用接口渲染数据
methods: { gotoregister() { this.router.push("/Register"); }, submitForm(formName) { this.refs[formName].validate((valid) => { if (valid) { axios.post("http", { username: this.ruleForm.username, password: this.ruleForm.password, }) .then((res) => { // console.log(res.data); let { data,meta } = res.data; if (meta.status == 200) { this.message.success(meta.msg); localStorage.username = data.username; localStorage.token = data.token; setTimeout(()=>{ this.router.push({path:'/index'}) },1000) } else { this.message.warning(meta.msg); } }) .catch((err) => { console.log(err); }); } else { this.message.error('您输入的有误'); } }); },
