Vue使用addRouter()动态生成三级菜单的问题

最新推荐文章于 2024-08-16 19:15:04 发布

clc_2020

最新推荐文章于 2024-08-16 19:15:04 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/clc_2020/article/details/106584098

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue中如何使用addRouter动态生成三级菜单栏的过程。通过递归过滤异步路由表，根据用户角色权限生成菜单，确保了菜单结构的灵活性与安全性。特别关注二级路由组件设置及路径配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题记录一次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
}