vue+element使用动态加载路由方式实现三级菜单页面显示的操作

2023-07-19 08:24:03 176

需要用到中间件的方式,这样就可以实现了我们想要的方式

publish-center.vue

|||

0":index="item.children[0].path">{{item.children[0].name}}

路由部分：

{
path:'/recordQuery',
component:Home,
name:'菜单1',
iconCls:'el-icon-search',
children:
[
{
path:'carRecord',
z:'1',
component:()=>import('@/page/publish-center.vue'),
name:'菜单2',
children:[{path:'/carRecord/passRecord',component:passRecord,name:'菜单'},

]
},
]
},

补充知识：Vue使用addRouter()动态生成三级菜单的问题

标题记录一次vue使用addRouter动态生成三级菜单栏的问题

1.addRouter()里面需要一个固定格式的数组：例如

import{asyncRoutes,constantRoutes}from'@/router'
/*Layout*/
importLayoutfrom'@/layout'
/**
*Usemeta.roletodetermineifthecurrentuserhaspermission
*@paramroles
*@paramroute
*/
functionhasPermission(roles,route){
if(route.meta&&route.meta.roles){
returnroles.some(role=>route.meta.roles.includes(role))
}else{
returntrue
}
}

/**
*Filterasynchronousroutingtablesbyrecursion
*@paramroutesasyncRoutes
*@paramroles
*/
exportfunctionfilterAsyncRoutes(routes,roles,parentModules){
constres=[]

parentModules.forEach(parentModule=>{
vartmp={}
tmp.path=parentModule.parentTargetUrl

tmp.component=Layout
tmp.name=parentModule.parentTargetUrl.substr(1)
tmp.meta={}
tmp.meta.title=parentModule.parentModuleName
tmp.meta.icon='dashboard'
tmp.meta.roles=roles
tmp.children=[]

parentModule.modules.forEach(module=>{

//XXXListPage
varchildrenTmpListPage={}
varchildrenTmpEditPage={}
//childrenTmpListPage.path='/'+module.targetName+'ListPage'
childrenTmpListPage.name=module.targetName+'ListPage'
childrenTmpListPage.meta={}
childrenTmpListPage.meta.title=module.moduleName
childrenTmpListPage.meta.icon='dashboard'
childrenTmpListPage.meta.roles=roles
//childrenTmpListPage.component=resolve=>require(['@/page/'+module.targetName.charAt(0).toUpperCase()+module.targetName.slice(1)+'/list_page'],resolve)
childrenTmpListPage.path='/'+module.targetName+'ListPage'

if(module.childrenModules!=null&&module.childrenModules!=undefined&&module.childrenModules!=""){
childrenTmpListPage.component=Layout

}else{

childrenTmpListPage.component=resolve=>require(['@/page/'+module.targetName.charAt(0).toUpperCase()+module.targetName.slice(1)+'/list_page'],resolve)
}

childrenTmpListPage.children=[]
//XXXEditPage
//childrenTmpEditPage.path='/'+module.targetName+'EditPage'
//childrenTmpEditPage.name=module.targetName+'EditPage'
//childrenTmpEditPage.meta={}
//childrenTmpEditPage.meta.title=module.moduleName
//childrenTmpEditPage.meta.icon='dashboard'
//childrenTmpEditPage.meta.roles=roles
//childrenTmpEditPage.hidden=true
//childrenTmpEditPage.component=resolve=>require(['@/page/'+module.targetName.charAt(0).toUpperCase()+module.targetName.slice(1)+'/edit_page'],resolve)

//三级菜单生成
varroleChildren=roles

if(module.childrenModules!=null&&module.childrenModules!=undefined&&module.childrenModules!=""){
module.childrenModules.forEach(module=>{

varchildren2TmpListPage={}
varchildren2TmpEditPage={}
//childrenTmpListPage.path
children2TmpListPage.path=module.targetName+'ListPage'
alert(children2TmpListPage.path)
children2TmpListPage.name=module.targetName+'ListPage'
children2TmpListPage.meta={}
children2TmpListPage.meta.title=module.moduleName
children2TmpListPage.meta.icon='dashboard'
children2TmpListPage.meta.roles=roleChildren

children2TmpListPage.component=resolve=>require(['@/page/'+module.targetName.charAt(0).toUpperCase()+module.targetName.slice(1)+'/list_page'],resolve)
console.log('@/page/'+module.targetName.charAt(0).toUpperCase()+module.targetName.slice(1)+'/list_page')
childrenTmpListPage.children.push(children2TmpListPage)

})
}

tmp.children.push(childrenTmpListPage)
//tmp.children.push(childrenTmpEditPage)
})
res.push(tmp)

})

console.log(res)
returnres
}

conststate={
routes:[],
addRoutes:[]
}

constmutations={
SET_ROUTES:(state,routes)=>{
state.addRoutes=routes
state.routes=constantRoutes.concat(routes)
}
}

constactions={
generateRoutes({commit},obj){
returnnewPromise(resolve=>{
letaccessedRoutes=filterAsyncRoutes(asyncRoutes,obj.roles,obj.parentModules)
commit('SET_ROUTES',accessedRoutes)
resolve(accessedRoutes)
})
}
}

exportdefault{
namespaced:true,
state,
mutations,
actions
}

三级路由重点：

componment:二级路由不能设置为NULL，必须存在，我设置的就是Layout(引用自@/layout)

path:路径最前面不能使用"/"

以上这篇vue+element使用动态加载路由方式实现三级菜单页面显示的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

热门推荐

随机推荐