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
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vuex持久化存储之vuex-persist问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
详解Vue的computed(计算属性)使用实例之TodoList
本篇文章主要介绍了详解Vue的computed(计算属性)使用实例之TodoList，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了vue2.0如何动态绑定img的src属性(三元运算)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）
这篇文章主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
在项目开发中，如果使用到了 vuex，通常我会将所有的接口请求单独用一个文件管理，这篇文章主要介绍了Vuex中actions如何优雅处理接口请求,业务逻辑写在 actions 中，本文给大家分享完整流程需要的朋友可以参考下2022-11-11
这篇文章主要介绍了关于Echarts饼图图例太长的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家介绍了富文本编辑器quill.js开发之自定义格式扩展,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家详细介绍了Vue实现表格批量审核功能实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论