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
}
}
}