vue-递归路由实现树形控件展示

<template>
  <div>
    <el-tree :data="treeArr" />
  </div>
</template>

<script>
export default {
  data() { return { treeArr: [] }; },
  methods: {
    getTreeData(obj, arrT) {
      obj.forEach((item, index) => {
      //判断是不是导航路由
        if (typeof item.hidden === "undefined") {
        //判断是单菜单路由还是多菜单路由
          if (item.meta) {
          //如果有多个子菜单时
            let obj = { label: item.meta.title, children: [] };
            arrT.push(obj);
			//对其children再次执行getTreeData()函数
            if (item.children) this.getTreeData(item.children, obj.children);
          } else {
          	// 如果只有一个子菜单
            arrT.push({label: item.children[0].meta.title, children: []});
          }
        }
      });
    }
  },
  mounted() {
    this.getTreeData(this.$router.options.routes, this.treeArr );
  }
};
</script>

路由结构

[
  { path: "/login",, hidden: true},
  { path: "/404", hidden: true},
  { path: "/", children: [
      { path: "dashboard", meta: { title: "刻字小程序", icon: "dashboard" }}
    ]
  },
  { path: "/attendance", children: [
      {path: "/attendance", meta: { title: "考勤", icon: "link", affix: true }}
    ]
  },
  { path: "/settings",meta: { title: "系统设置", icon: "nested" },children: [
      { path: "index",meta: { title: "权限管理" }},
      { path: "theme",meta: { title: "主题设置" }}
    ]
  },
  { path: "*", redirect: "/404", hidden: true }
];

效果图