这篇文章主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
需要用到中间件的方式,这样就可以实现了我们想要的方式
publish-center.vue
<div class="tools"> <i>|||</i></div> <i></i>{{item.name}} <!-- --> <i></i>{{child.name}} {{sun.name}} <!-- --> {{child.name}} <!-- {{child.name}} --><!-- --><!-- {{sun.name}} -->0" :index="item.children[0].path"><i></i>{{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 */ import Layout from '@/layout' /** * Use meta.role to determine if the current user has permission * @param roles * @param route */ function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } } /** * Filter asynchronous routing tables by recursion * @param routes asyncRoutes * @param roles */ export function filterAsyncRoutes(routes, roles, parentModules) { const res = [] parentModules.forEach(parentModule => { var tmp =<em>本文来源[email protected]搞@^&代*@码2网</em> {} 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 var childrenTmpListPage = {} var childrenTmpEditPage = {} //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) // 三级菜单生成 var roleChildren = roles if(module.childrenModules != null && module.childrenModules != undefined && module.childrenModules != ""){ module.childrenModules.forEach(module =>{ var children2TmpListPage = {} var children2TmpEditPage = {} // 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) return res } const state = { routes: [], addRoutes: [] } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } } const actions = { generateRoutes({ commit }, obj) { return new Promise(resolve => { let accessedRoutes = filterAsyncRoutes(asyncRoutes, obj.roles, obj.parentModules) commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) } } export default { namespaced: true, state, mutations, actions }
三级路由重点：
componment: 二级路由不能设置为NULL，必须存在，我设置的就是Layout(引用自@/layout)
path:路径最前面不能使用”/”
以上就是vue+element使用动态加载路由方式实现三级菜单页面显示的操作的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+element使用动态加载路由方式实现三级菜单页面显示的操作
转载请注明原文链接：vue+element使用动态加载路由方式实现三级菜单页面显示的操作
