Ant Design Vue pro 动态路由的实现和打包方式
更新时间:2023年06月30日 09:51:45 作者:晓果博客
这篇文章主要介绍了Ant Design Vue pro 动态路由的实现和打包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
配置路由权限
在config文件夹下router.config.js中配置路由权限
如下图所示
配置请求网络接口
在api文件夹下login.js中
根据自己后台的数据修改路由权限封装规则
在store/module/user.js中修改GetInfo方法
源js
修改后js
后台数据示例
{ "code": 200, "data": { "avatar": "/avatar2.jpg", "contact_mobile": "", "name": "晓果哈哈哈", "role": { "contact_mobile": "13273026553", "contact_name": "平台管理员", "permissions": [ { "permissionId": "usermanagement", "permissionName": "用户管理" }, { "permissionId": "voicemanage", "permissionName": "语音管理" }, { "permissionId": "appmanagement", "permissionName": "App管理" }, { "permissionId": "vipmanagement", "permissionName": "VIP管理" }, { "permissionId": "brandownermanage", "permissionName": "品牌商管理" }, { "permissionId": "machinemanage", "permissionName": "机器管理" }, { "permissionId": "softwaremanage", "permissionName": "软件管理" }, { "permissionId": "officialaccounts", "permissionName": "公众号设置" } ] } }, "message": "获取数据成功" }
动态路由效果完成
修改退出登录需要两次退出问题
修改根目录下permission.js
源js
修改后js
删除
if (to.path === loginRoutePath) { next({ path: defaultRoutePath }) NProgress.done() }
打包
在vue.config.js中添加:
publicPath:'./', outputDir:'dist',
修改router下index.js
export default new Router({ mode: 'hash', routes: constantRouterMap })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue 使用iView组件中的Table实现定时自动滚动效果
要在css中设置table的高度,使数据过多时出现滚动条,将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden,接下来通过本文介绍vue使用iView组件中的Table实现定时自动滚动效果,需要的朋友可以参考下2024-05-05vue-cli项目代理proxyTable配置exclude的方法
今天小编就为大家分享一篇vue-cli项目代理proxyTable配置exclude的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09解决antd日期选择组件,添加value就无法点击下一年和下一月问题
这篇文章主要介绍了解决antd日期选择组件,添加value就无法点击下一年和下一月问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论