前端工作小结38-动态路由

简介: 前端工作小结38-动态路由
routes() {
      /*获取数据里面的控制业务端和营销端的mode数值*/
      const property = Vue.ls.get(ACCESS_MODE);
      /*const */
   /*   const showingMenu = staticRoutes.filter(item){
        return !item.hidden
      }*/
      /*去除里面的不是item.hidden是隐藏的属性*/
     const showingMenu = staticRoutes.filter(item => !item.hidden);
     /*拿出所有的菜单*/
      let menu = [];
      let pNames = new Set();
      /*for循环得出所需要的结构 打印出所有的结构*/
      for (const item of showingMenu) {
        console.log(showingMenu)
        /*如果没有父亲级别菜单 就开始继续进行执行*/
        if (!item.meta.pName) {
          /*如果这个端是业务端 并且里面的name的数值不是没有大菜单 比较多的*/
          if (property == 1 && (item.name == "Order" || item.name == "Content"||item.name=="Home"||item.name == "Task"))
          {
          } else {
            /*否则就是业务端*/
            menu.push({
              path: item.path,
              name: item.name,
              icon: item.meta.icon,
              text: item.meta.text
            });
          }
          /*如果pnames有大菜单 */
        } else if (!pNames.has(item.meta.pName)) {
          /*就去除里面的pname*/
          const peers = showingMenu
            .filter(i => i.meta.pName === item.meta.pName)
            .map(i => ({
              path: i.path,
              name: i.name,
              icon: i.meta.icon,
              text: i.meta.text
            }));
          if (property == 1 && (item.meta.pName == "结算管理" )||(item.meta.pName == "数据分析"))
          {
          }else{
            menu.push({
              text: item.meta.pName,
              icon: iconMap[item.meta.pName],
              children: peers
            });
            pNames.add(item.meta.pName);
          }
        }
      }
      return menu;
    },


相关文章
|
3月前
|
移动开发 前端开发 API
深入理解前端路由:构建现代 Web 应用的基石(上)
深入理解前端路由:构建现代 Web 应用的基石(上)
深入理解前端路由:构建现代 Web 应用的基石(上)
|
3月前
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
3月前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
111 0
|
3天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
19 0
|
3月前
|
前端开发 JavaScript API
SPA与前端路由:构建无缝体验的现代前端应用
在前端开发领域,单页面应用(SPA)和前端路由成为了构建现代、高度交互性的应用程序的重要技术。本文将探讨SPA的优势以及前端路由的实践,帮助读者更好地理解如何利用这些技术来提升用户体验和开发效率。
|
3月前
|
前端开发 JavaScript 搜索推荐
深入理解前端路由:构建现代 Web 应用的基石(下)
深入理解前端路由:构建现代 Web 应用的基石(下)
深入理解前端路由:构建现代 Web 应用的基石(下)
|
3月前
|
前端开发 API UED
探索前端开发中的单页面应用(SPA)与前端路由
在前端开发中,单页面应用(SPA)和前端路由技术扮演着重要的角色。本文将深入探讨SPA的概念、特点以及与传统多页面应用的对比,并介绍前端路由的原理、实现方式以及其在SPA中的应用。通过对这两个关键概念的详细解析,读者将更好地理解现代前端开发中的架构设计和技术选型。
|
3月前
|
移动开发 前端开发 JavaScript
【面试题】 面试官为啥总是喜欢问前端路由实现方式?
【面试题】 面试官为啥总是喜欢问前端路由实现方式?
|
3月前
|
移动开发 前端开发 JavaScript
面试官为啥总是喜欢问前端路由实现方式?
面试官为啥总是喜欢问前端路由实现方式?
|
3月前
|
缓存 JavaScript 前端开发
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
48 0