Vue项目菜单导航封装（一级菜单在上面，二级三级菜单在左侧）

效果图：

 

第一步，封装上方水平一级菜单

第二步，封装左侧二级，三级菜单导航

第三步，配置路由

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    routes: [{
        path: '/',
        component: () => import('../components/common/Whole.vue'),
        meta: {
            title: '整体页面布局'
        },
        children: [{
            path: '/dashboard',
            component: () => import('../page/Dashboard.vue'),
            meta: {
                title: '首页'
            },
            redirect: '/Home',     // 该配置是若点击选择父目录时，默认选中该父目录下的子路径页面
            children: [{
                path: '/Home',
                component: () => import('../page/Dashboard.vue'),
                meta: {
                    title: '首页'
                },
            }]
        },{
            // 国际化组件
            path: '/i18n',
            component: () => import('../components/common/I18n.vue'),
            meta: {
                title: '国际化'
            }
        },

        {
            // 系统设置
            path: '/system',
            component: () => import('../page/system/index.vue'),
            meta: {
                title: '系统设置'
            },
            redirect: '/system/menuManage',
            children: [
                {
                    path: 'menuManage',
                    component: () => import('../page/system/menuManage.vue'),
                    meta: {
                        title: '菜单管理'
                    }
                },
                {
                    path: 'contentManage',
                    component: () => import('../page/system/contentManage.vue'),
                    meta: {
                        title: '内容管理'
                    }
                },
                {
                    path: 'roleManage',
                    component: () => import('../page/system/roleManage.vue'),
                    meta: {
                        title: '角色管理'
                    }
                },
                {
                    path: 'systemManage',
                    component: () => import('../page/system/systemManage.vue'),
                    meta: {
                        title: '系统设置'
                    }
                },
            ]
        },
        {
            path: '/404',
            component: () => import('../page/404.vue'),
            meta: {
                title: '404'
            }
        },
        {
            path: '/403',
            component: () => import('../page/403.vue'),
            meta: {
                title: '403'
            }
        },
        ]
    },
    {
        // 登录页面
        path: '/login',
        component: () => import('../page/Login.vue'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '*',
        redirect: '/404'
    }
    ]
});

第四步，在页面中应用