• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue-element-admin 后台动态加载菜单

开发技术 开发技术 1周前 (06-09) 9次浏览

参考:

vue-element-admin 后台动态加载菜单 – _Gj – 博客园 (cnblogs.com)

dynamic-router: 动态路由 最新代码地址:https://github.com/g0ngjie/dynamic-router (gitee.com)

 

Vue 实现动态生成路由:这个好使!!!!

Vue 实现动态生成路由(动态生成菜单,根据菜单动态生成路由)_Vincent的博客-CSDN博客_vue动态路由

https://blog.csdn.net/tly599167/article/details/107378249/

 

 

本人的办法:

首先通过后端服务接口返回菜单的JSON格式

vue-element-admin 后台动态加载菜单

 

 

第一步:在srclayoutcomponentsSidebarindex.vue中通过上一步获取的JSON,动态循环读取绑定菜单

<el-menu
      class="sidebar-menu"
      router
      :default-active="$route.path"
      :collapse="!sidebar.opened"
      :collapse-transition="false"
      :show-timeout="200"
      unique-opened
      background-color="#272a36"
      text-color="#e7e7e7"
      active-text-color="#ff6600">
      <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%;">
        <template v-for="group in menu">
          <el-submenu v-if="group.children && group.children.length > 0" :key="group.id" :index="group.id">
            <template slot="title">
              <i :class="group.class"></i>
              <span slot="title">{{group.name}}</span>
            </template>
            <el-menu-item v-for="menu in group.children" :key="menu.id" :index="menu.path">
              <i class="icon iconfont icon-pointer" style="vertical-align: baseline;"/>
              {{menu.name}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :key="group.id" :index="group.path">
            <i :class="group.class"></i>
            <span slot="title">{{group.name}}</span>
          </el-menu-item>
        </template>
      </el-scrollbar>
    </el-menu>

vue-element-admin 后台动态加载菜单

 

 

 

第二步:在srcrouterindex.js的动态路由asyncRoutes中生成和后台接口返回一样路径的路由

同第一步,接口返回的路径:/customer/next_leve

vue-element-admin 后台动态加载菜单

 

 

 

 

 如此就可以成功访问了,如下:

vue-element-admin 后台动态加载菜单

 


程序员灯塔
转载请注明原文链接:vue-element-admin 后台动态加载菜单
喜欢 (0)