vue+ant-design-vue实现导航菜单循环遍历

demo地址：https://gitee.com/shjin/menu_...
1.创建vue项目

vue create menu_demo

2.安装ant-design-vue

yarn add ant-design-vue

3.main.js文件引入ant-design-vue

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

4.菜单index.js

import Menu from "ant-design-vue/es/menu";
import Icon from "ant-design-vue/es/icon";

const { Item, SubMenu } = Menu;

export default {
  name: "SMenu",
  props: {
    menu: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: "light"
    },
    mode: {
      type: String,
      required: false,
      default: "inline"
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  data() {
    return {
      openKeys: [],
      cachedOpenKeys: [],
      selectedKeys:['user1']
    };
  },
  computed: {
    rootSubmenuKeys: vm => {
      const keys = [];
      vm.menu.forEach(item => keys.push(item.path));
      return keys;
    }
  },
  mounted() {
    this.updateMenu();
  },
  watch: {
    collapsed(val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat();
        this.openKeys = [];
      } else {
        this.openKeys = this.cachedOpenKeys;
      }
    },
    $route: function() {
      this.updateMenu();
    }
  },
  methods: {
    // select menu item
    onOpenChange(openKeys) {
      // 在水平模式下时执行，并且不再执行后续
      if (this.mode === "horizontal") {
        this.openKeys = openKeys;
        return;
      }
      // 非水平模式时
      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key));
      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    updateMenu() {
      const routes = this.$route.matched.concat();
      const { hidden } = this.$route.meta;
      if (routes.length >= 3 && hidden) {
        routes.pop();
        this.selectedKeys = [routes[routes.length - 1].path];
      } else {
        this.selectedKeys = [routes.pop().path];
      }
      const openKeys = [];
      if (this.mode === "inline") {
        routes.forEach(item => {
          openKeys.push(item.path);
        });
      }
      //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
      if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) {
        this.collapsed
          ? (this.cachedOpenKeys = openKeys)
          : (this.openKeys = openKeys);
      }
      //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
    },

    // render
    renderItem(menu) {
      if (!menu.hidden) {
        return menu.children && !menu.alwaysShow
          ? this.renderSubMenu(menu)
          : this.renderMenuItem(menu);
      }
      return null;
    },
    renderMenuItem(menu) {
      let props = { to: { name: menu.name } };
      const attrs = { target: menu.target };
      return (
        
          

            {this.renderIcon(menu.icon)}
            {menu.title}
          
        
      );
    },
    renderSubMenu(menu) {
      const itemArr = [];
      if (!menu.alwaysShow) {
        menu.children.forEach(item => itemArr.push(this.renderItem(item)));
      }
      return (
        
          
            {this.renderIcon(menu.icon)}
            {menu.title}
          
          {itemArr}
        
      );
    },
    renderIcon(icon) {
      if (icon === "none" || icon === undefined) {
        return null;
      }
      const props = {};
      typeof icon === "object" ? (props.component = icon) : (props.type = icon);
      return ;
    }
  },
  render() {
    const { mode, theme, menu } = this;
    const props = {
      mode: mode,
      theme: theme,
      openKeys: this.openKeys
    };
    const on = {
      select: obj => {
        this.selectedKeys = obj.selectedKeys;
        this.$emit("select", obj);
      },
      openChange: this.onOpenChange
    };

    const menuTree = menu.map(item => {
      if (item.hidden) {
        return null;
      }
      return this.renderItem(item);
    });
    return (
      
        {menuTree}
      
    );
  }
};

5.结合使用

6.效果图