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

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()動態(tài)生成三級菜單的問題

標題記錄一次vue使用addRouter動態(tài)生成三級菜單欄的問題

1.addRouter()里面需要一個固定格式的數(shù)組：例如

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使用動態(tài)加載路由方式實現(xiàn)三級菜單頁面顯示的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。