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


Posted in Javascript onAugust 04, 2020

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

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使用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使用动态加载路由方式实现三级菜单页面显示的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
Javascript倒计时代码
Aug 12 Javascript
Ext 今日学习总结
Sep 19 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
js 自动播放的实例代码
Nov 19 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 #Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 #Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 #Javascript
解决vuecli3中img src 的引入问题
Aug 04 #Javascript
简介JavaScript错误处理机制
Aug 04 #Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
You might like
joomla组件开发入门教程
2016/05/04 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
htm调用JS代码
2007/03/15 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
AngularJS 应用模块化的使用
2018/04/04 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python3.6的venv模块使用详解
2018/08/01 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python gdal安装与简单使用
2019/08/01 Python
python解析yaml文件过程详解
2019/08/30 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
详解Flask前后端分离项目案例
2020/07/24 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
在校学生职业规划范文
2014/01/08 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
敬老院活动总结
2014/04/28 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python