vue-element-template动态菜单

原创已于 2023-03-30 10:28:14 修改 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-30 10:24:25 首次发布

在构建动态菜单时，通常使用递归来处理数据结构。文章讨论了如何在递归前检查菜单项的`children`属性，当其长度为0时，删除或置为undefined，以适应单级菜单。同时，展示了如何转换为Vue路由所需的数据结构，包括设置path、component、redirect、name和children属性，以及处理redirect和component的方法。

当我们在做动态菜单的时候，大多数都是利用递归处理，在用递归处理菜单数据结构的时候，很容易忽略菜单组件SidebarItem渲染规则，它的规则是有children就渲染为多级菜单

但是像首页菜单怎么办呢，它只有一级，而不是像系统管理这样多级的

其实只需要在递归之前判断一下children属性的长度是否等于0，等于0就删除children属性，或者children赋值为undefined

动态菜单：

// 转换为router路由需要的数据结构
// list为后端菜单接口的树形数据
function filterRouter(list) {
  const routes = []

  list.forEach(item => {
    // 重点
    if(item.children.length === 0) {
      // item.children = undefined
      delete item.children
    }
    
    routes.push({
      path: item.url,
      component: component(item),
      redirect: redirect(item),
      name: item.url,
      meta: { title: item.name, icon: item.url},
      // 判断children是否存在，上面删除children后会导致forEach的报错
      children: item.children && filterRouter(item.children)
    })
  })
  
  return routes
}

// 处理redirect
function redirect(item) {
  if(item.children && item.children.length !== 0) {
    return item.children[0].url
  }
  return ''
}

// 处理component
function component(item) {
  if(!item.parent_id) {
    // Layout是组件
    return Layout
  }
  return loadView(item.url)
}

// 路由懒加载
function loadView(view) {
  return (resolve) => require([`@/views${view}`], resolve)
}