vue-element-admin改为从后台获取菜单
一、修改文件\src\router\index.js
文件的asyncRoutes清理为
export const asyncRoutes = [
{ path: '*', redirect: '/404', hidden: true }
]
二、修改src\store\modules\permission.js
增加
复制并注释 const actions = {
新的
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
const loadMenuData = []
// 先查询后台并返回左侧菜单数据并把数据添加到路由
getMenu(state.token).then(response => {
let data = response
if (response.code !== 20000) {
alert(JSON.stringify('菜单数据加载异常'))
// throw new Error('菜单数据加载异常')
} else {
data = response.data
Object.assign(loadMenuData, data)
const tempAsyncRoutes = Object.assign([], asyncRoutes)
generaMenu(tempAsyncRoutes, loadMenuData)
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = tempAsyncRoutes || []
} else {
accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
}
}).catch(error => {
console.log(error)
})
})
}
}
vue-element-admin改为从后台获取菜单的更多相关文章
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富
GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...
- 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...
- vue+element UI递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- vue element admin 关闭eslint校验
vue.config.js里面进行设置 lintOnSave: false, // lintOnSave: process.env.NODE_ENV === 'development',
- vue+element UI 使用select元素动态的从后台获取到
VUE select元素动态的从后台获取到 <el-form-item label="选择店铺"> <el-select v-model="value& ...
- 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...
- 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
随机推荐
- Windows下搭建Linux开发环境(vagrant)
[下载] vagrant软件:https://www.virtualbox.org/wiki/Downloads centos镜像: http://isoredirect.centos.org/cen ...
- golang之类型转换cast
Go 语言作为强类型语言,在使用 Golang 开发项目时,经常会遇到类型转换的场景,整型之间可以直接转换,字节切片和字符串之间也可以直接转换. 但是,如果整型和字符串之间做类型转换,则需要使用 st ...
- springboot 参数注解 注入参数
什么时注解参数 说明 我们在 使用spring mvc 的时候会使用这样的注解 @ResponseBody 这样,spring mvc 会将 客户端传来的数据,自动构建成 相应类型的对象. 有些情况下 ...
- HarmonyOS Next 入门实战 - 导航框架:页面路由、组件导航(Navigation)
页面路由 官方不推荐使用页面路由,这里仅做简单介绍. 页面路由用于标识 @Entry 注解的页面间的跳转. 包引入 import { router } from'@kit.ArkUI'; 页面跳转 r ...
- web移动端常见问题(二)
1.input光标颜色 默认情况下,光标颜色与字体颜色color相同,但也可以通过caret-color属性来单独设置 但是IOS的光标与字体颜色无关,默认是蓝色 可以单独设置光标颜色,这样ios也有 ...
- 生产环境BigDecimal用错了,已哭晕在厕所。。。
大家好,我是苏三,又跟大家见面了. 前言 在日常开发中,很多小伙伴喜欢用 BigDecimal 来处理精确计算,比如钱.分数.比例啥的. 理论上,它比 double 或 float 更精确,但如果你用 ...
- Reverse the Rivers 题解
原题链接https://codeforces.com/problemset/problem/2036/E (暂时不会弄翻译,所以不上原题了) 说一下我对题意的理解吧 有n个国家,每个国家有k个区域,用 ...
- vscode 你想要的配置
配置用户代码片段 文件 → 首选项 → 配置用户代码片段 比如配置一个vue3的代码片段: { "vue3-code": { "prefix": "v ...
- Visual Studio - API调试与测试工具之HTTP文件
后端开发,我们对于Api接口调试测试大致有以下方法:单元测试.Swagger.Postman. 但是每种方式也都有其局限性,几年前使用Visual Studio Code开发过一段时间,接触了REST ...
- 龙哥量化:TB交易开拓者_趋势跟踪策略_多策略对单品种_A00011880206期货量化策略,严格的用样本内参数, 跑样本外数据,滚动测试未来行情
如果您需要代写技术指标公式, 请联系我. 龙哥QQ:591438821 龙哥微信:Long622889 也可以把您的通达信,文华技术指标改成TB交易开拓者的自动交易量化策略. 量化策略介绍 投资标的: ...