前端工作小结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;
    },


相关文章
|
5月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
87 3
|
1月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
4月前
|
存储 JavaScript 前端开发
前端 vue:路由的高级使用
前端 vue:路由的高级使用
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
81 1
|
3月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
4月前
|
资源调度 JavaScript 前端开发
前端vue:路由的基本使用
前端vue:路由的基本使用
|
4月前
|
移动开发 前端开发 JavaScript
浅谈前端路由原理hash和history
该文章详细解析了前端路由的两种模式——Hash模式与History模式的工作原理及其实现方式,并通过实例代码展示了如何在实际项目中运用这两种路由模式。
|
3月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
54 0
|
4月前
|
移动开发 缓存 前端开发
构建高效的前端路由系统:从原理到实践
在现代Web开发中,前端路由系统已成为构建单页面应用(SPA)不可或缺的核心技术之一。不同于传统服务器渲染的多页面应用,SPA通过前端路由技术实现了页面的局部刷新与无缝导航,极大地提升了用户体验。本文将深入剖析前端路由的工作原理,包括Hash模式与History模式的实现差异,并通过实战演示如何在Vue.js框架中构建一个高效、可维护的前端路由系统。我们还将探讨如何优化路由加载性能,确保应用在不同网络环境下的流畅运行。本文不仅适合前端开发者深入了解前端路由的奥秘,也为后端转前端或初学者提供了从零到一的实战指南。
|
6月前
|
开发框架 JSON 前端开发
Vue&Element 前端应用开发之菜单和路由的关系
Vue&Element 前端应用开发之菜单和路由的关系