1、在router里把所有的路由都加上。
2、后端存储路由path和其他设计需要的信息。
3、登录后,后端返回菜单树,根据权限不同,返回的菜单不同,并且还要返回每个path代表的页面具有的权限数组。可以实现前端对权限的控制。
4、根据后端返回的菜单树的path,去过滤路由数组,即path对应相同的路由就要显示成菜单并把路由数组作为需要渲染的菜单数组;并且把后端的权限集合和其他信息加入到这个符合条件的路由的meta里面;然后把这个route push到菜单的绑定对象数组种,最后就可以展示菜单了。
5、前端渲染。
这种思路,后端的菜单表就简单,不过需要在前端把路由就配值完整,当然,也可以完完全全的去动态构建路由对象,组件都动态加载,后端存的东西就会很多。

vue我自己的动态菜单思路的更多相关文章

  1. vue+element-ui实现无限级动态菜单树

    使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...

  2. 【vue】iView-admin2.0动态菜单路由

    vue项目实现动态路由有俩种方式 一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户-- ...

  3. 【vue】iView-admin2.0动态菜单路由【版2】

    依照iView-admin2.0动态菜单路由[版1] 归纳几个节点动态路由获取方式2 ——> easymock假数据 ——> 数据转组件处理.addRoutes ——> localS ...

  4. vue 动态菜单以及动态路由加载、刷新采的坑

    需求: 从接口动态获取子菜单数据 动态加载 要求只有展开才加载子菜单数据 支持刷新,页面显示正常 思路: 一开始比较乱,思路很多.想了很多 首先路由和菜单共用一个全局route, 数据的传递也是通过s ...

  5. 【ABP】 动态菜单修改过程asp.netcore+vue

    无论用什么框架,第一件事情就是实现动态菜单,从数据库中读取菜单配置项输出前台,网上翻了一大堆翻译文档,也看了官方英文文档,关键点在于如何实现NavigationProvider和在前端调用abp.na ...

  6. vue、iview动态菜单(可折叠)

    vue项目与iview3实现可折叠动态菜单. 菜单实现一下效果: 动态获取项目路由生成动态三级菜单导航 可折叠展开 根据路由name默认打开子目录,选中当前项 自动过滤需要隐藏的路由(例:登陆) 在手 ...

  7. 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

    在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...

  8. .net core3.1 abp动态菜单和动态权限(思路) (二)

    ps:本文需要先把abp的源码下载一份来下,跟着一起找实现,更容易懂 在abp中,对于权限和菜单使用静态来管理,菜单的加载是在登陆页面的地方(具体是怎么知道的,浏览器按F12,然后去sources中去 ...

  9. vue-element-admin 动态菜单改造

    vue-element-admin 动态菜单改造 vue-element-admin 是一款优秀后台前端解决方案,它基于 vue 和 element-ui实现.开源后台管理系统解决方案项目 Boot- ...

  10. winform快速开发平台 -> 通用权限管理之动态菜单

    这几个月一直忙APP的项目,没来得及更新项目,想想该抽出时间整理一下开发思路,跟大家分享,同时也希望得到宝贵的建议. 先说一下我们的权限管理的的设计思路,首先一个企业信息化管理系统一定会用到权限管理, ...

随机推荐

  1. mybatis 查询一对多子表只能查出一条数据

    mybatis 插叙一对多子表只能查出一条数据 环境 ssm 持久层 mybatis 关联查询一对多<collection> 原因 主表id 和子表id 一样 处理方式:  select ...

  2. MogDB/openGauss如何实现事务的rollback

    MogDB/openGauss 如何实现事务的 rollback 本文出处:https://www.modb.pro/db/113262 数据库最主要的功能就是存储数据,然而我们在进行数据库操作时,却 ...

  3. JDK 19新特性 & JDK 多版本安装切换配置

    新的JDK 19包含如下7个新的特性: 转自:JDK19中比较重要的新特性-电子发烧友网 JEP 405: Record Patterns(Record模式) JEP 422: Linux/RISC- ...

  4. android 找不到设备

    前言 当我们安装android studio的时候,测试的时候,你可能找不到设备. 我遇到的有两种情况,一种是本身就需要安装插件,如一些低端机或者有些小米机. 还有一种情况需要去触发一下,有些华为手机 ...

  5. chrome浏览器代理插件SwitchyOmega使用

    第一步:下载SwitchyOmega插件 Proxy_SwitchyOmega_2.5.21.crx 第二步:安装插件, 1,在chrome扩展程序开启开发者模式: 2,将插件拖过来: 第三步:设置代 ...

  6. b站的视频进度条悬浮预览视频画面实现方式

    1.探究 在看b站视频,滑到进度条的时候突发奇想,想知道这个预览图是怎么做到的 打开控制台,发现每次移动鼠标悬浮位置的时候都会发出一条网络请求,并且该请求的size显示来源于内存,当时以为每次加载视频 ...

  7. Oracle 将字符中含有的字母或特殊字符去除并将字符串置换成数字

    将字符中含有的字母或特殊字符去除并将字符串置换成数字 将字符中含有的字母或特殊字符去除并将字符串置换成数字 to_number(nvl(TRANSLATE(u.scsqrbzl, 'qwertyuio ...

  8. 力扣467(java)-环绕字符串中唯一的子字符串(中等)

    题目: 把字符串 s 看作是 "abcdefghijklmnopqrstuvwxyz" 的无限环绕字符串,所以 s 看起来是这样的: "...zabcdefghijklm ...

  9. 新手小白-创建IDEA项目( IDEA 2021.2.1 版本)

    好久没打开IDEA这个软件,我发现连项目怎么具体创建都不知道了,哭唧唧~记录一下 创建项目: 1.先创建一个空项目,点击[File] -- > [New] --> [Project]; 2 ...

  10. 比心云平台基于阿里云容器服务 ACK 的弹性架构实践

    ​简介:本文主要探讨比心云平台如何利用阿里云容器服务 ACK,来构建应用弹性架构,进一步优化计算成本. 作者:韩韬|比心技术 前言 应用容器化改造后,不可避免地会面临这样一个问题:Kubernetes ...