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

作

需要⽤到中间件的⽅式,这样就可以实现了我们想要的⽅式publish-center.vue

路由部分：

{

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 = {}

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使⽤动态加载路由⽅式实现三级菜单页⾯显⽰的操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。