圆月山庄资源网 Design By www.vgjia.com
需要用到中间件的方式,这样就可以实现了我们想要的方式
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使用动态加载路由方式实现三级菜单页面显示的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]