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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
js实现上传图片及时预览
May 07 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
浅谈js闭包理解
Mar 28 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 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
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jQuery技巧总结
2011/01/01 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
node和vue实现商城用户地址模块
2018/12/05 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python爬取网易云音乐评论
2018/11/16 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
招商专员岗位职责
2014/02/08 职场文书
防沙治沙典型材料
2014/05/07 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫