Ant Design Vue 动态生成菜单和路由绑定

---

前言

一、动态生成

二、代码

<template>
  <div style="width: 256px">
    <a-button @click="toggleCollapsed" style="margin-bottom: 16px" type="primary">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
    </a-button>
    <a-menu
      :default-open-keys="['home']"
      :default-selected-keys="['home']"
      :inline-collapsed="collapsed"
      mode="inline"
      theme="dark"
    >
      <template v-for="item in menuList">
        <a-menu-item :key="item.key">
          <router-link :to="item.path">
            <a-icon :type="item.type"/>
            <span>{{ item.title }}</span>
          </router-link>
        </a-menu-item>
      </template>
      <template v-for="item in subMenuList">
        <a-sub-menu :key="item.key">
          <span slot="title"><a-icon :type="item.type"/><span>{{item.title}}</span></span>
          <template v-for="sub in item.children">
            <a-menu-item :key="sub.key">
              <router-link :to="sub.path">
                {{sub.title}}
              </router-link>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
import req from '@/utils/request'

export default {
  components: {},
  created() {
    this.getData()
  },
  data() {
    return {
      collapsed: false,
      menuList: [],
      subMenuList: []
    }
  },
  methods: {
    getData() {
      req.get('/menu.json').then(res => {
        console.log(res.data)
        this.menuList = res.data.menuItems
        this.subMenuList = res.data.subItems
      })
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
  },
}
</script>

• json模拟数据(放在项目public目录下)

{
  "menuItems": [
    {
      "key": "home",
      "type": "md-home",
      "title": "主页",
      "path": "/"
    },
    {
      "key": "fuye",
      "type": "md-home",
      "title": "附页",
      "path": "/fuye"
    }
  ],
  "subItems": [
    {
      "title": "二级菜单1",
      "key": "21",
      "type": "ios-paper",
      "children": [
        {
          "key": "t1",
          "type": "ios-grid",
          "title": "表格",
          "path": ""
        },
        {
          "key": "msg",
          "type": "ios-notifications-outline",
          "title": "查看消息",
          "path": ""
        }
      ]
    },
    {
      "title": "二级菜单2",
      "key": "22",
      "type": "ios-paper",
      "children": [
        {
          "key": "password",
          "type": "md-lock",
          "title": "修改密码",
          "path": ""
        },
        {
          "key": "userInfo",
          "type": "md-person",
          "title": "基本资料",
          "path": ""
        }
      ]
    }
  ]
}

总结

• 2020-11-18 16:54:50
  动态生成菜单项，后面会继续增加动态创建路由