vue-element- admin,vue-element-admin文档
本文主要介绍了vue-元素-管理搭建后台管理系统的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
近期在搞一个会议健康申报系统时，要搞一个后台，用到了vue-元素-管理模板，使用的是潘剑臣（源码地址：https://github。com/panjia Chen/vue-admin-template)
第一步：当前是下载源码了，下载地址：https://github。com/panjia Chen/vue-admin-模板
第二步：修改登录页面，登录接口(/store/modules/admin.js/login())，根据实际情况修改用户信息接口(/store/modules/admin。js/getInfo())
第三步：修改权限路由
1.删减路由文件中的配置，出口常数康斯坦特卢特斯保留基本的/登录、/404
2.动态路由清空，导出常量asyncRoutes=[]
3./store/modules/permission.js下定义生成路由方法
/**
* 后台查询的菜单数据拼装成路由格式的数据
* @param路线
*/
导出函数通用菜单(路线，数据){
data.forEach(item={
let menu={
路径：item.url，
孩子：[],
名称： menu_ item.id，
meta: { title: item.name，id: item.id，icon:item.icon}
}
//控制台。日志(项目。网址。(仪表板))的索引
//console.log(item.children)
if (item.children) {
//控制台。日志(项目。孩子。长度)
if (item.children.length 0) {
menu.redirect=item.children[0].全球资源定位器(统一资源定位器)
菜单。组件=布局
}否则{
//菜单。component=()=import(`@/views $ { item。URL }/index `)
菜单。组件=()=承诺。resolve(require(`@/views $ { item。URL } `).默认)
}
如果(项。URL项目。网址。的索引(仪表板)！=-1) {
菜单={
路径："/",
组件：布局，
重定向："/仪表板",
孩子：[{
路径："仪表板",
名称："仪表板",
组件：()=导入( @/视图/仪表板/索引),
元：{标题： 控制台，图标："仪表板"}
}]
}
}
generaMenu(menu.children，item.children)
}否则{
console.log(没有儿童)
}
路由.推送(菜单)
})
}
行动中根据后台的接口加载动态路由
动作：{
GenerateRoutes({ commit }，data) {
返回新承诺(resolve={
const loadMenuData=[]
getAuthMenu().然后(res={
let data=res.data
console.log(menu=，data)
console.log(asyncRoutes=，asyncRoutes)
让newRoutes=[]//此处清空之前的路由
Object.assign(loadMenuData，Data)
generaMenu(newRoutes，loadMenuData)
newRoutes.push({ path: * ，redirect: /404 ，hidden: true })
let被访问路由器=新路由 []
console.log(accessedRouters ，accessedRouters)
提交(设置路由器，访问路由器)
解决()
})
})
},
重置路由器({提交}) {
返回新承诺(resolve={
提交("重置路由器")
解决()
})
}
}
第四步、在/许可。射流研究…中添加动态路由
router.beforeEach(async (to，from，next)={
//开始进度条
NProgress.start()
//设置页面标题
文档。title=获取页面标题(to。meta。标题)
//确定用户是否已经登录
const hasToken=getToken()
如果(hasToken) {
if (to.path===/login) {
//如果已登录，则重定向到主页
下一步({路径：/ })
NProgress.done()
}否则{
const hasget userinfo=store。吸气剂。名字
if (hasGetUserInfo) {
下一个()
}否则{
尝试{
//获取用户信息
等待store.dispatch(admin/getInfo )
store.dispatch(GenerateRoutes ，{}).然后(()={ //生成可访问的路由表
路由器。添加路线(商店。吸气剂。添加路由器)//动态添加可访问路由表
console.log(to=，store.getters.addRouters)
下一个({.to，replace: true }) //hack方法确保添加路线已完成，设置替换：真，这样导航就不会留下历史记录
NProgress.done()
})
//下一个()
} catch(错误){
//删除令牌并转到登录页面重新登录
等待商店。派遣(“管理/重置发言”)
Message.error(error 有错误)
下一个(`/登录？redirect=${to.path} `)
NProgress.done()
}
}
}
}否则{
/*没有标记*/
if (whiteList.indexOf(to.path)！==-1) {
//在免费登录白名单中，直接去
下一个()
}否则{
//其他没有权限访问的页面被重定向到登录页面。
下一个(`/登录？redirect=${to.path} `)
NProgress.done()
}
}
})
然后你就可心情地玩了。
到此这篇关于vue-元素-管理搭建后台管理系统的实现步骤的文章就介绍到这了，更多相关vue-元素-管理搭建后台管理系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。