AntDesign vue学习笔记（四）导航菜单动态加载

一般的后台系统都有一个树形导航菜单，具体实现如下，主要参考
https://my.oschina.net/u/4131669/blog/3048416
1、定义sub-menu组件，用于递归显示多级菜单

<template functional>
  <a-sub-menu
    :key="props.menuInfo.key"
  >
    <span slot="title">
      <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
    </span>
    <template v-for="item in props.menuInfo.children">
      <a-menu-item
        v-if="!item.children"
        :key="item.key"
      >
        <a-icon type="pie-chart" />
        <span>{{ item.title }}</span>
      </a-menu-item>
      <sub-menu
        v-else
        :key="item.key"
        :menu-info="item"
      />
    </template>
  </a-sub-menu>
</template>
<script>
export default {
  props: ['menuInfo'],
};
</script>

template functional标志该组件为函数化组件

2、在Mainfrm中引入组件

import SubMenu from './SubMenu'
components: {
SubMenu
}

3、menu模板

<template v-for="item in menuList">
  <a-menu-item v-if="!item.sidebars.length" :key="item.name">
     <a-icon :type="item.iconType" />
        <span>{{item.name}}</span>
  </a-menu-item>
  <sub-menu v-else :menu-info="item" :key="item.name"/>
</template>

4、axios获取并显示实现代码

    getmenu () {
      let that = this
      this.axios(
        {
          method:"get",
          url:'/api/getmenu', 
          headers: {
            'Content-Type':'application/json;charset=UTF-8'
          }
        })
        .then((response) => {
          this.menus=response.data.data;
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
  },

5、menus在data中定义

data () {
    return {
      menus:[]
    }
  },

 6、最终实现效果如下