Vue 动态添加路由及生成菜单

举报
青年码农 发表于 2022/08/24 22:10:52 2022/08/24
1k+ 0 0
【摘要】 写管理后台的都会遇到这个这种需求,管理员登录后台需要看到所有功能,普通的公司管理员或部门管理员登录只能看到部分功能权限 不同角色有不同的权限,这时如果管理平台的菜单定义在代码里,显然是不能满足上面的需求,我们就需要后台提供用户菜单,然后前台动态生成路由。 1 动态添加路由 利用 vue-router 的 addRo...

写管理后台的都会遇到这个这种需求,管理员登录后台需要看到所有功能,普通的公司管理员或部门管理员登录只能看到部分功能权限

不同角色有不同的权限,这时如果管理平台的菜单定义在代码里,显然是不能满足上面的需求,我们就需要后台提供用户菜单,然后前台动态生成路由。

1 动态添加路由

利用 vue-router 的 addRoutes 方法可以动态添加路由。请求接口返回菜单格式如下


       [
           {
               "id":"1332194352530083842",
               "pid":"1331859957655007233",
               "name":"TspUser",
               "component":"user/tspuser/index",
               "redirect":null,
               "meta":{
                   "title":"用户信息 ",
                   "icon":"pic-right",
                   "show":true,
                   "target":null,
                   "link":null
               },
               "path":"/user",
               "hidden":false
           },
           {
               "id":"1334396728339042306",
               "pid":"1333592942347546625",
               "name":"Product",
               "component":"fota/product/index",
               "redirect":null,
               "meta":{
                   "title":"产品信息",
                   "icon":"pic-right",
                   "show":true,
                   "target":null,
                   "link":null
               },
               "path":"/product",
               "hidden":false
           }
       ]
   
  

path是地址栏显示路径,component是这个菜单对应的文件地址。这里返回的结构并没有按照树型返回,都是平级,所以前台需要重新梳理关系。定义一个方法


       routerPackag(routers) {
         let accessedRouters = routers.filter(router => {
           if (router.component === "Layout") {
             // Layout组件特殊处理
             router.component = Layout;
           } else {
             //处理组件---重点
             router.component = this.loadView(router.component);
           }
           //存在子集
           if (router.children && router.children.length) {
             router.children = this.routerPackag(router.children);
           }
           return true;
         });
         return accessedRouters;
       },
       loadView(view) {
         // 路由懒加载
         return () => import(`@/${view}`);
       },
   
  

这个方法就是把平级的处理成正确的父子级,同时路由懒加载。

2 生成菜单

后台提供的菜单数据需要前台身体生成菜单树。


       <a-layout-sider
         :class="themeStyle == 'light'?'rightbg':'darkbg'"
         :trigger="null"
         collapsible
         v-model="collapsed"
       >
         <div :class="themeStyle == 'light'?'rightlogo':'darklogo'">
           <img class="l-logo" v-show="collapsed" src="../assets/logo.png" a
           <span v-show="!collapsed">管理平台</span>
         </div>
         <a-menu
           mode="inline"
           :theme="themeStyle"
           :openKeys="openKeys"
           @click="selectItem"
           :selectedKeys="[$route.path]"
           @openChange="onOpenChange"
         >
           <a-sub-menu v-for="item in menu" :key="item.id">
             <span slot="title">
               <i class="iconfont" :class="item.icon"></i>
               <span v-show="!collapsed">
                 {{lang == "cn"
                 ? item.name
                 : lang == "en"
                 ? item.nameEnUS
                 : lang == "tw"
                 ? item.nameZhTW
                 : item.nameJA}}
               </span>
             </span>
             <a-menu-item
               v-for="childrenitem in item.children"
               :key="childrenitem.showPath"
               @click="titleClick(item,childrenitem)"
             >
               <i class="iconfont" :class="childrenitem.icon"></i>
               <span>
                 {{lang == "cn"
                 ? childrenitem.name
                 : lang == "en"
                 ? childrenitem.nameEnUS
                 : lang == "tw"
                 ? childrenitem.nameZhTW
                 : childrenitem.nameJA}}
               </span>
             </a-menu-item>
           </a-sub-menu>
         </a-menu>
       </a-layout-sider>
   
  

上述功能已经在开源的管理平台实现,地址如下, 有兴趣的可以clone。

https://gitee.com/nmgwap/vue-antd

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125066834

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。