需要用到中间件的方式,这样就可以实现了我们想要的方式
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+element使用动态加载路由方式实现三级菜单页面显示问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
