Ant Design 动态菜单设计（随笔记录）

建立文件目录side-menu，side-menu.vue未左侧菜单组件

image.png

新建router.js文件，定义路由

router路由分为三类，便于后期权限显示判断，分别为：

• loginRouter--不作为Main组件的子页面，如：login
• otherRouter--作为Main组件的子页面但不现实在左侧菜单的编辑或详情页，如：个人中心
• appRouter--作为Main组件的子页面并且显示在左侧菜单的页面

// import Main from '@/views/Main.vue';

// 不作为Main组件的子页面展示的页面单独写，如下
export const loginRouter = {
    path: '/login',
    name: 'login',
    meta: {
        title: 'Login - 登录'
    },
};

// 作为Main组件的子页面展示但是不在左侧菜单显示的路由写在otherRouter里
export const otherRouter = {
    path: '/',
    icon: 'table',
    name: 'otherRouter',
    redirect: '/home',
    component: Main,
    children: [
        {
            icon: 'table',
            path: '/dashboard',
            title: '个人中心',
            name: 'ownspace_index',

        },
    ]
};

// 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里
export const appRouter =[
    {
        path: '/base_table',
        icon: 'table',
        name: 'home',
        title: '首页测试',
        component: Main,
        children: [
            {
                path: '/base_table/first',
                icon: 'table',
                name: 'home_index',
                title: '首页',
                access: [0],
                component: () => import('@/views/Home.vue')
            },
            {
                path: '/base_table/second',
                icon: 'table',
                name: 'text',
                title: '测试',
                access: [0],
                component: () => import('@/views/text.vue')
            },
        ]
    }
]

// 所有上面定义的路由都要写在下面的routers里
export const routers = [
    loginRouter,
    otherRouter,
    ...appRouter,
    // page500,
    // page403,
    // page404,
];

新建store.js，用于存放菜单项的状态，以及定义menuList菜单数组

引入appRouter,otherRouter等数据列
生成公共的菜单数组数据

import Vue from 'vue'
import Vuex from 'vuex'
import {otherRouter, appRouter} from './router/routers';


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      cachePage: [],
      lang: '',
      isFullScreen: false,
      openedSubmenuArr: [], // 要展开的菜单数组
      menuTheme: 'light', // 主题
      themeColor: '',
      pageOpenedList: [{
          title: '首页',
          path: '',
          name: 'home_index'
      }],
      currentPageName: '',
      currentPath: [
          {
              title: '首页',
              path: '',
              name: 'home_index'
          }
      ], // 面包屑数组
      menuList: [],
      routers: [
          otherRouter,
          ...appRouter
      ],
      tagsList: [...otherRouter.children],
      messageCount: 0,
      dontCache: ['text-editor', 'show-loan'] // 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
  },
  mutations: {
      setTagsList (state, list) {
          state.tagsList.push(appRouter[0]);
      },
  },
  actions: {

  }
})

side-menu.vue

定义菜单子组件

<template>
    <a-menu theme="light" mode="inline"
            @click="menuClick"
            @openChange="openChange"
            :openKeys="openKeys"
            :selectedKeys="selectedKeys">
        <template v-for="(item,index) in menuList"><!--一级遍历-->
            <template v-if="item.children && item.children.length > 0"><!--如果存在子集-->
                <a-sub-menu :key=item.path :index="item.index">
                    <span slot="title"><span>{{item.title}}</span></span> <!-- 首页测试-->
                    <template v-for="(subItem,subIndex) in item.children"><!--//二级遍历-->
                        <a-sub-menu v-if="subItem.children" :key=subItem.path><!--如果存在子集-->
                            <!--<template slot="title">{{ subItem.title }}</template>-->
                            <a-menu-item v-for="(threeItem,i) in subItem.children" :key="threeItem.path"
                                         :index="threeItem.index"><!--三级遍历-->
                                <span>{{threeItem.title}}</span>
                            </a-menu-item>
                        </a-sub-menu>

                        <a-menu-item v-else :key=subItem.path :index="subIndex">
                            <span>{{subItem.title}}</span>
                        </a-menu-item>
                    </template>
                </a-sub-menu>
            </template>

            <template v-else>
                <a-menu-item :key=item.path :index="index">
                    <span><span>{{item.title}}</span></span>
                </a-menu-item>
            </template>
        </template>
    </a-menu>
</template>

<script>
    import vTabs from '@/components/MultiTab'
    import vHeader from "@/views/common/Header.vue";
    import vUserMenu from '@/views/common/TopRightMenu'
    import SettingSideBar from "@/views/common/SettingSideBar";
    import vTitle from "@/views/common/TitleBar";

    export default {
        name: "side-menu",
        components: {
            vTitle,
            SettingSideBar,
            vHeader,
            vTabs,
            vUserMenu,
        },
        data() {
            return {
                collapsed: false,
                titleBar: '系统首页',
                selectedKeys: [this.$route.fullPath],
                openKeys: [],
                menuList:this.$store.state.tagsList,
            }
        },
        methods: {
            menuClick({item, key, keyPath}) {
                this.$router.push(key)
            },
            openChange(keys) {
                this.openKeys = keys
                console.log('openChange', keys)
            },

            setItem(router) {
                this.selectedKeys = [router.fullPath]
                // this.openKeys = ['/base_table']
                this.items.forEach((item) => {
                    if (item.subs && item.subs.length > 0) {
                        item.subs.forEach((subItem) => {
                            if (subItem.path === router.fullPath) {
                                this.openKeys = [item.path]
                            }
                        })
                    }
                })
            },
        },
        mounted(){
            console.log(this.menuList);
        },
        watch: {
            $route(newValue, oldValue) {
                console.log('router', newValue)
                this.setItem(newValue)
                this.titleBar = newValue.meta.title
            },
            tagsList() {
                console.log('tagsList', this.tagsList)
            }
        }
    }
</script>

<style scoped>

</style>

Home.vue

调用菜单组件

<template>
    <div class="wrapper">
        <div>
            <a-layout id="components-layout-demo-custom-trigger">

                <a-layout-sider
                        :style="{width:'200px',background:'white'}"
                        :trigger="null"
                        :collapsible="true"
                        v-model="collapsed">
                    <div class="logo">
                        <p>后台管理系统</p>
                    </div>
                    <sedMenu></sedMenu>
                </a-layout-sider>

                <a-layout>
                    <v-header @onCollapseClick="toCollapse"></v-header>
                    <!--<v-tabs style="margin-top: 3px"></v-tabs>-->
                    <v-title :title="titleBar"></v-title>
                    <a-layout-content
                            :style="{ height: '500px',width:'100%',minHeight:'100vh',padding:'16px',overflow:'auto'}">
                        <!-- 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。-->
                        <keep-alive>
                            <router-view></router-view>
                        </keep-alive>
                    </a-layout-content>
                </a-layout>

            </a-layout>
        </div>

        <setting-side-bar></setting-side-bar>
    </div>

</template>

以上。