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

定义菜单子组件

Home.vue

调用菜单组件

以上。