需要用到中間件的方式,這樣就可以實現了我們想要的方式

publish-center.vue

<template> <router-view></router-view></template><script> export default { }</script>

<el-menu :default-active='$route.path' @open='handleopen' @close='handleclose' @select='handleselect' unique-opened router v-show='!collapsed' > <div @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 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使用動態加載路由方式實現三級菜單頁面顯示的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。