vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包

Ant Design Vue pro 动态路由的实现和打包

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

})

Ant Design Vue pro 动态路由的实现和打包相关教程

html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能

html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能 1，html+js+canvas实现画板涂画功能 效果如下： !DOCTYPE HTMLhtmlheadmeta charset=utf-8/style#canvas{cursor:crosshair;}#red{background:red; width:30px;height: 27px}#blue{background:blu

使用VUE3 开发Chorm插件(并整合element-ui)不行你来砍死我

使用VUE3 开发Chorm插件(并整合element-ui)不行你来砍死我 网上搜索了很多vue开发Chorm插件的博客，在一步步试的过程中，总是会有这样那样的问题。经过不懈努力，终于走通了一条。下面是我的过程, 如果你只想要demo的代码，请直接调到文档最后有github仓库地

vue +element 的Table封装公共组件

vue +element 的Table封装公共组件 由于在做项目的时候，很多表格都是一样的格式，我们每次引入这样很浪费空间，将代码量上涨，不如将表格进行封住成一个公共的组件，便于我们随时随刻的调用。 以下是一个简单的格式 在这里去调用组件 对于表格操作的event对

Vue watch侦听属性

Vue watch侦听属性 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 script src=https://cdn.jsdelivr.net/npm/vue/dist/vue.js/script titlewatch侦听属性/title/headbody div id=test

vue源码学习(3)Vue.nextTick()

vue源码学习(3)Vue.nextTick() 1. Vue.nextTick的使用 Vue.nextTick的使用的作用: Vue.nextTick官网示例 Vue.nextTick和平时代码中使用的this.$nextTick原理一样: //$nextTick 源码Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this)};.

vue给div添加自定义的v-on事件,非组件

vue给div添加自定义的v-on事件,非组件 vue通常都是在父子组件中,v-on和emit配对使用,我们都知道v-on:click是可以直接使用的.如下: div @click=getNumber/div 那如果,我想加个@left事件(如下),按键盘的左箭头的时候打印一个随机数,需要怎么做呢? divref=left@l

js和vue计算DOM元素距离底部的距离

js和vue计算DOM元素距离底部的距离 js 参考地址 当前元素与底部的距离 = 可视区窗口高度 + 文档滚动高度 - 当前元素与页面顶部距离 - 当前元素高度 vue: window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height

【vue学习】6.天气app-天知道

【vue学习】6.天气app-天知道 【vue学习】6.天气app-天知道 !DOCTYPE htmlhtml lang=en head meta charset=UTF-8 / meta name=viewport content=width=device-width, initial-scale=1.0 / meta http-equiv=X-UA-Compatible content=ie=edge / title天知道/tit