vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作

更新時(shí)間：2020年08月04日 11:02:36 作者：瘦瘦的小芝芝

這篇文章主要介紹了vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

需要用到中間件的方式,這樣就可以實(shí)現(xiàn)了我們想要的方式

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: '菜單' },
 
    ]
     },
     ]
},

補(bǔ)充知識(shí)：Vue使用addRouter()動(dòng)態(tài)生成三級(jí)菜單的問(wèn)題

標(biāo)題記錄一次vue使用addRouter動(dòng)態(tài)生成三級(jí)菜單欄的問(wèn)題

1.addRouter()里面需要一個(gè)固定格式的數(shù)組：例如

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)
    
   // 三級(jí)菜單生成
   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
}

三級(jí)路由重點(diǎn)：

componment: 二級(jí)路由不能設(shè)置為NULL，必須存在，我設(shè)置的就是Layout(引用自@/layout)

path:路徑最前面不能使用"/"

以上這篇vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: