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

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

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使用动态加载路由方式实现三级菜单页面显示问题相关推荐

vue系统权限(动态加载路由方式)
目录 1.注册vue-router 2.声明默认路由和权限路由 3.用vuex实现全局登录.退出登录等方法 4.用vuex模块单独写权限路由的判断 5.监听路由跳转实现动态加载权限菜单需要用到动 ...
vue 项目如何实现动态加载路由？
一般来说,vue项目实现动态路由的方式大体可分为两种: 前端把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 后台接口提供当前用户对应权限的路由表,前端通过调接口拿到后处理(后 ...
vue动态加载路由的实现
动态加载路由的实现 vue后台管理之动态加载路由 vue路由动态加载
vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
nodejs动态加载路由
Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具工具来源: Nodejs需要手动加载路由文件,如果一个个添加,项目逐渐扩大,比较麻烦. 尤其在项目route目录下,增加模块文件夹 ...
Vue文件内动态加载JS
Vue文件内动态加载JS let jsUrl = 'https://code.jquery.com/jquery-3.4.1.min.js' // JS地址 let jqueryJs = decode ...
【Python_PySide2学习笔记（一）】PySide2动态加载UI方式，重写关闭窗体事件
** PySide2设置关闭提示窗口:动态加载UI方式,重写关闭窗体事件 ** ** 前言 ** 转载:https://blog.csdn.net/qq_44703282/article/detail ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
vue组件的动态加载
平常的vue项目开发,已经很难遇见一千行,甚至几千行代码的页面了,毕竟大家都会去拆分组件.但如果一个页面需要通过十几个组件或者几十个组件中的某几个组件去排列组合渲染,此时用动态加载就很有必要了. ...

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

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

最新文章

热门文章