动态实现vue三级菜单

使用element菜单组件，layout布局，路由参数存在数据库里，通过请求获取回来

1.数据库参数配置

8676230b0e91ebd7867e147d7f98e30.png

2.layout布局

微信图片_20210915170159.jpg

Layout结构，可以看出Layout这个组件是包含了菜单和标签的，如果三级路由依旧使用Layout为组件，那么vue就会在现有的<router-view>里再渲染一层当前的结构，但是我们想要的只有<router-view>标签，所以只能新建一个组件，把除了<router-view>以外的元素都移除掉，就当做一个盒子来展示第三级页面

image.png

3.数据格式处理

var getRouter // 用来获取后台拿到的路由
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      getAllRouter().then(response => {
        getRouter = response.data// 后台拿到路由
        console.log('getRouter', getRouter)

        getRouter = filterAsyncRouter(getRouter)
        // console.log('filterAsyncRouter(getRouter)',filterAsyncRouter(getRouter));
        // console.log('accessedRouters1',this.accessedRouters);
        console.log('getRouter1', getRouter)
        // let accessedRoutes
        // accessedRoutes = filterAsyncRoutes(getRouter, roles)
        commit('SET_ROUTES', getRouter)
        resolve(getRouter)
      })
    })
  }
}

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') { // Layout组件特殊处理
        route.component = Layout
      } else if (route.component === 'Layout2') { // Layout2组件特殊处理
        route.component = Layout2
      } else {
        route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }

    return true
  })
  console.log('accessedRouters', accessedRouters)
  return accessedRouters
}

4.在页面中渲染