npm 下载
npm i element-ui -S
Vue
main.js
//引入element-ui的包
import ElementUI from 'element-ui';
//引入element-ui的样式
import 'element-ui/lib/theme-chalk/index.css';
//全局使用element-ui
Vue.use(ElementUI);
vue 的全局部署侧边栏
Home.vue 文件 // 公共文件，全局应用
<el-container>
<el-header style="height:100px;">
<div class="content-head-span">
<div class="content-head-span-left">
<span>网站后台管理系统</span>
</div>
<div class="content-head-span-spans">
<span>管理员：</span>
<span>无双</span>
</div>
</div>
</el-header>
<el-container>
<el-aside style="width: 203px;text-align:center;">
<el-menu router :default-active="active_index">
<el-menu-item v-for="(item,index) in routerMenuse" :key="index" :route="{name:item.name}" >
<el-menu-item :index="item.label" >
<span class="addBgClass11">{{item.name}}</span>
</el-menu-item>
</el-menu-item>
</el-menu>
</el-aside>
<el-main style="padding: 20px;">
<router-view ></router-view>
</el-main>
</el-container>
</el-container>
script 的 data 数据部分
active_index: '',
//权限路由
routerMenus : [], //后台返回回来的动态路由
//本身路由
routerMenuse : [
{
id : '1',
name :'基础管理', //路由名字
label : '/basics', // 填写路由 -> 跳转路由
},
], //原本自己写的路由
//俩个路由名称要匹配可以动态增加路由 和 匹配图片
methods方法部分
//从后台获取的数据 res.data
this.routerMenus = res.data
for(var i = 0;i<this.routerMenus.length;i++){
for(var j=0;j<this.routerMenuse.length;j++){
if(this.routerMenus[i].order == this.routerMenuse[j].id){
this.routerMenuse[j].title = this.routerMenus[i].title
}
}
}