基于iview-admin的动态菜单

思路
定义routers
代码实现

最近公司前台一直在使用vue，其中一个项目决定使用iview UI库，为了方便我们就使用了官方提供的iview-admin后台模板。可我这个菜鸡使用起来举步维艰，下面给大家介绍一下我们实现动态菜单的可行方案。

思路

将所有的路由在项目的router/routers.js文件中定义好，一定要按照人家的格式定义。如果是左侧菜单，必须 type:"menu"。并且全部的路由定义时都hideInMenu: true默认隐藏。【默认隐藏为了给动态显示菜单做铺垫，当用户有某某个路由时，我们才显示某个路由，即hideInMenu: false】
登录成功后将用户的认证信息保存到客户端，如vux、localstorage，但vuex刷新页面会丢失。
进入首页时，通过路由加载菜单

yes，就是这个思路，下面我们具体讲解每一步的实现。

定义routers

额…没有那么高大上，就是在人家iview-admin现成的文件中写入我们自己的路由。编写路由的规范，可以跳到我另一篇：iview-admin路由介绍

代码实现

iview admin的main.vue组件中的导航菜单组件引用的值menuList便是我们要注意的重点。

vuex中的menuList

我们着重关注app.js中的getMenuByRouter()
str ：用户拥有哪些路由的数组json串，存的是router的name

let str = ''
let arr = ''
export const getMenuByRouter = (list, access) => {str = localStorage.getItem('auth_info') // 登录成功后，后台传入的该用户拥有的路由数组arr = JSON.parse(str) if (arr == null) return false;let res = []forEach(list, item => {if (arr.indexOf(item.name) >= 0 && item.meta.type == 'menu') {item.meta.hideInMenu = false}if (!item.meta || (item.meta && !item.meta.hideInMenu)) {let obj = {icon: (item.meta && item.meta.icon) || '',name: item.name,meta: item.meta}if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {obj.children = getMenuByRouter(item.children, access)}if (item.meta && item.meta.href) obj.href = item.meta.hrefif (showThisMenuEle(item, access)) res.push(obj)}})return res
}

为什么根据用户拥有路由，通过遍历就可以动态菜单？

所有的路由我们已经在前台的routers定义好了，默认都是隐藏的。在这遍历用户拥有的路由，判断我们的routers.js中全部路由是否包含用户拥有的路由，将用户拥有的路由，并且是type:menu的，hideInMenu: false设置为false，即显示出来！

本文侧重于提供思路，如果需要源码的话就评论留下联系方式 ~

基于iview-admin的动态菜单相关推荐

前后端分离，基于vue+elementUI的动态菜单
制作动态菜单的思路: 就是当前用户登陆后,保存用户的信息,通过用户的id,去查找该用户对象的菜单.后台获取的菜单数据,最终传给前台形式就是父菜单里包含了所有的子菜单:并在前台登录成功后,把菜单数据取出 ...
[风铃开发系列]IView动态菜单配置
后台的菜单管理配置完了,现在准备把前台的菜单管理和后台的权限联动起来,先看看,IView admin是如何显示的所以的菜单在router/routers.js下面配置,配置好我们路径,因为前端的路由 ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace Admin框架菜单导航 ...
使用依赖注入的ASP.NET Core 2.0用户角色基础动态菜单管理
目录介绍背景先决条件使用代码第1步 - 创建数据库创建数据库第2步 - 创建ASP.NET Core 更新appsettings.json 步骤3 - 在Startup.cs文件中添加I ...
Vue3 中如何加载动态菜单？
松哥之前写了两篇文章和大家分享了 TienChin 项目中的菜单数据问题,还没看过的小伙伴请戳这里: Vue 里,多级菜单要如何设计才显得专业? TienChin 项目动态菜单接口分析这两篇文章主要 ...
html响应式布局 ace,.NET Core基于Ace Admin的响应式框架
原标题:.NET Core基于Ace Admin的响应式框架转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace A ...
“动吧“ - crud 练习 part7 - Shiro安全框架简介 - 58~60 - 、[扩展] - 动态菜单 - 60
名词: ------------------------------------------- subject - 主体.起因 - (登录到==>登录成功后 , 全部的记录) principal ...
JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

基于iview-admin的动态菜单

基于iview-admin的动态菜单

思路

定义routers

代码实现

基于iview-admin的动态菜单相关推荐

最新文章

热门文章