首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Ant Design Vue pro 动态路由的实现和打包

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
})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。