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

总结

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

相关文章

  • 完美解决axios跨域请求出错的问题

    完美解决axios跨域请求出错的问题

    下面小编就为大家分享一篇完美解决axios跨域请求出错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • keep-alive保持组件状态的方法

    keep-alive保持组件状态的方法

    这篇文章主要介绍了keep-alive保持组件状态的方法,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue 使用iView组件中的Table实现定时自动滚动效果

    vue 使用iView组件中的Table实现定时自动滚动效果

    要在css中设置table的高度,使数据过多时出现滚动条,将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden,接下来通过本文介绍vue使用iView组件中的Table实现定时自动滚动效果,需要的朋友可以参考下
    2024-05-05
  • vue-cli项目代理proxyTable配置exclude的方法

    vue-cli项目代理proxyTable配置exclude的方法

    今天小编就为大家分享一篇vue-cli项目代理proxyTable配置exclude的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue2.0脚手架搭建

    Vue2.0脚手架搭建

    这篇文章介绍了使用vue-cli搭建脚手架的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • 如何解决uni-app编译后 vendor.js 文件过大

    如何解决uni-app编译后 vendor.js 文件过大

    这篇文章主要介绍了如何解决uni-app编译后 vendor.js 文件过大的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • 解决antd日期选择组件,添加value就无法点击下一年和下一月问题

    解决antd日期选择组件,添加value就无法点击下一年和下一月问题

    这篇文章主要介绍了解决antd日期选择组件,添加value就无法点击下一年和下一月问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue3使用echarts绘制折线图的代码示例

    vue3使用echarts绘制折线图的代码示例

    这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制折线图,文中有详细的示例代码供大家参考,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07
  • Vue 按键修饰符处理事件的方法

    Vue 按键修饰符处理事件的方法

    这篇文章主要介绍了Vue 按键修饰符的相关资料,vue中新增按键修饰符和系统修饰符来处理类似的事件,具体内容详情大家参考下本文
    2018-05-05
  • 详解vue 模版组件的三种用法

    详解vue 模版组件的三种用法

    本篇文章主要介绍了详解vue 模版组件的三种用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论