vue引用 element-ui 的 el-aside -> el-menu -> el-menu-item 路由侧边栏跳转链接，接上动态路由

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

            }

          }

        }