vue+element使用动态加载路由方式实现三级菜单页面显示问题

需要用到中间件的方式,这样就可以实现了我们想要的方式publish-center.vue<template><router-view></router-view></template><script>export default {}</scri

瘦瘦的小芝芝

20967人浏览 · 2018-06-29 16:59:24

瘦瘦的小芝芝 · 2018-06-29 16:59:24 发布

需要用到中间件的方式,这样就可以实现了我们想要的方式

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^