ant-design-vue 导航菜单实现3级及以上(函数式组件)

emmm…发现前面一篇我自己在没做过的情况下也看不懂((/ω＼))。3级及以上导航菜单的实现说到底也不会很难，就是交互(菜单展开与否)比较烦人，在这里就稍微提一下需要注意的东西。推荐大家还是直接clone一下项目，查看log信息吧。 在线demo

按照官网信息，根据项目来进行一定的处理，最终的code如下:

import {
      generateTitle } from './breadcrumb/index.js'
import {
      Menu } from 'ant-design-vue'
import path from 'path'
// 函数式组件
const SubMenu = {
     
  template: `
      
        
          
          {
      { generateTitle(menuInfo.meta.title) }}
        
        
      
    `,
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
     
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
     
      type: Object,
      default: () => ({
     })
    },
    baseRoute: {
     
      type: String,
      default: ''
    }
  },
  methods: {
     
    generateTitle,
    resovePath(item) {
     
      return path.resolve(this.baseRoute, item)
    }
  }
}

export default SubMenu

在这里需要用到node的path模块来对路由hash进行拼接(鬼知道我掉了多少头发才想到这个方法的…)。每次传入的baseRouter即父节点的path，将path一个个拼接起来就是完整的path。

上一篇说到判断优化、多级路由啥的。推荐大家将项目clone下来根据log一步步查看吧，都过去好几天了，懒得再reset回去看…我把最终的code贴出来吧，有兴趣的可以研究下

<template>
  <div class="sidebar-container">
    <a-layout-sider v-model="isCollapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :selected-keys="currentSelectMenu" :open-keys="openKeys" @click="menuClick" @openChange="onOpenChange">
        <template v-for="item in routers">
          <template v-if="!item.hidden">
            
            <a-menu-item v-if="hasOneChildren(item.children)" :key="item.redirect">
              <a-icon :type="item.children[0] && item.children[0].meta && item.children[0].meta.icon" />
              <span class="menu-title">
                <router-link style="display: inline-block;" :to="{path: item.path === '/' ? `${item.path}${item.children[0].path}` : `${item.path}/${item.children[0].path}`}">
                  {
    { generateTitle(item.children[0].meta.title) }}
                router-link>
              span>
            a-menu-item>
            
            <sub-menu v-else :key="item.path" :menu-info="item" :base-route="item.path" />
          template>
        template>
      a-menu>
    a-layout-sider>
  div>
template>

<script>
import {
       generateTitle } from './breadcrumb/index.js'
import SubMenu from './subMenu'
export default {
      
  components: {
      
    SubMenu
  },
  props: {
      
    collapsed: [Boolean],
    routers: {
      
      type: Array,
      default: () => []
    },
    parentNodeList: {
      
      type: Array,
      default: () => []
    }
  },
  data() {
      
    return {
      
      isCollapsed: false,
      onlyOneChild: null,
      openKeys: []
    }
  },
  computed: {
      
    // 当前选中的菜单项
    currentSelectMenu() {
      
      return [this.$route.path]
    },
    router() {
      
      return this.$route.path
    }
  },
  watch: {
      
    collapsed: {
      
      handler: function(val) {
      
        this.isCollapsed = val
      }
    }
  },
  created() {
      
    const openKeysArr = (this.$route.path).split('/')
    openKeysArr.shift()
    openKeysArr[0] = '/' + openKeysArr[0]
    openKeysArr.forEach((item, index) => {
      
      this.openKeys.unshift(item)
    })
  },
  methods: {
      
    generateTitle,
    // 点击菜单触发事件
    menuClick({
       item, key, keyPath }) {
      
      // length为1则说明没有子菜单
      keyPath.length === 1 ? this.openKeys = [] : ''
    },
    // 子菜单展开/关闭的回调
    onOpenChange(openKeys) {
      
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      this.openKeys = this.parentNodeList.indexOf(latestOpenKey) === -1 ? openKeys : latestOpenKey ? [latestOpenKey] : []
    },
    // 单个子节点
    hasOneChildren(item) {
      
      return !item.some(menu => menu.children) && item.length === 1
    }
  }
}
script>

<style lang="less" scoped>
.logo {
      
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.menu-title {
      
  display: inline-block;
  width: 85%;
  a {
      
    display: inline-block;
    width: 100%;
    color: #ccc;
    &:hover {
      
      color: #fff;
    }
  }
}
style>