vue+element使用动态加载路由方式实现三级菜单页面显示的操作
需要用到中间件的方式,这样就可以实现了我们想要的方式
publish-center.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
}
</script>
<el-menu :default-active="$route.path" class="el-menu-vertical-demo el-menus" @open="handleopen" @close="handleclose" @select="handleselect"
unique-opened router v-show="!collapsed" >
<div class="tools" @click.prevent="collapse">
<i>|||</i>
</div>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title" ><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item-group v-for="(child,indexs) in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">
<!-- <el-menu class="xz" v-if="!child.path" :default-active="child.path"> -->
<el-submenu :index="child.path" v-if="child.z &&!item.leaf">
<template slot="title" class="child_title"><i :class="child.iconCls"></i>{{child.name}}</template>
<el-menu-item v-for="(sun,i) in child.children" :index="sun.path" :key="sun.path" >
{{sun.name}}
</el-menu-item>
</el-submenu>
<!-- </el-menu> -->
<el-menu-item :index="child.path" v-if="!child.z" :key="child.path"> {{child.name}} </el-menu-item>
</el-menu-item-group>
<!-- <el-menu-item v-if="child.path">{{child.name}}</el-menu-item> -->
<!-- </el-menu-item-group> -->
<!-- <el-menu-item v-for="sun in child.children" :index="sun.path" :key="sun.path" v-if="!sun.hidden"> {{sun.name}}</el-menu-item> -->
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
路由部分：
{
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使用动态加载路由方式实现三级菜单页面显示的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
