Vue element-plus 导航栏 [el-menu]

导航栏 [el-menu]

Menu 菜单 | Element Plus

el-menu 有很多属性和子标签， 为网站提供导航功能的菜单。

常用标签：

它里面有两个子标签。el-menu-item，它其实就是 el-menu 每一个里面的 item，item 就是真实匹配到路由的每个栏目，不带有伸缩功能，具备真正内容的。

没有内容的是带有伸缩功能的（也就是点一下，然后就可以展开的），是一个功能模块的合并，也就是一个集合的展示，它没有本身的一个页面，真正的页面展示是在每一个 item 里面。

应该 menu 里面，除了 item 之外还有 sub item，sub item 里面还有 item。

最外层其实就是一个 menu，下面一层就是 el-sub-menu，最里面展开的就是 el-menu-item。

常用属性：

mode：它决定了横向还是纵向的 menu，这里的场景是纵向的。

collapse：它提供了折叠的能力，如果为 true 就直接折叠了，如果为 false 就不折叠了。这里只有纵向需要折叠，横向是不需要折叠的。

菜单栏有 router 模式，当你使用 router 模式的时候，它会将侧边的导航栏和你的 pass 进行关联，也就是和 router 下面的 pass 进行相应的关联。每次点击 item，那么就跳转到对应的 pass 页面了 。这样菜单栏就不需要单独维护，只需要维护路由规则就行了。

children 其实就是一个数组，通过数组的 length 来判断是为 menu（下面不能展开，没有内容），还是 sub-menu（可以展开，里面是有内容的）

上面第一块代码，概要的页面，component:Layout 它是全局导入的方式，它就是整体布局 。icon 就是侧边栏的 icon，这里就是整体布局。

下面有 children，它也是有子的 pass，也是叫 home。这里面写了它的名字，它的 icon，还有它正真的一个页面。

在整体布局下面有一个 children。它的子 pass 叫做 /home。

会基于这个路由生成一个概要，生成一个概要的 item。这里会去做一个判断，如果只有一个 children 的情况下，children 的 legnth 为 1 的情况下，那么其实就是一个 item。

如果 children 的长度大于 1 的情况下，那么其实就是 sub menu，里面才是一个一个的 item，这些 item 从子路由里面来。这里其实就是 for 循环将里面的 item 通过循环从子的路由里面来。 点击匹配的 key 其实就是它的 path，这样就可以直接跳转到它的 pass。

上面有个核心点 component:Layout，其实 icon 和 name 其实就是看你使用不使用，如果不使用就可以不写。当你打开 home 页面的时候，这个页面不会在渲染在 App.vue 下面的 router-view 位置。

而是 layout 里面的 router-view 位置 

以后所有的路由规则，要不里面是一个 children，要不里面是多个 children。像套娃一样，这里有个外层 Layout，这个是控制整体布局的。然后里面会有正真的内容页面的。如果 child 唯一的话就展示为一个 item，如果 children 为多个，那么就展示为一个 sub menu 加上 item 的方式。

APP.vue 直接显示整体布局 Layout，而 layout 布局里面还有一个 root view，在 main 里面，用来显示其他布局的，这样架子就搭起来了。

 第一步：写 router 规则

import {createRouter,createWebHistory} from "vue-router";

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 全局导入整体布局
import Layout from '@/layout/Layout.vue'

const routes = [
    {
        path: '/test',
        component: () =>import('@/views/test/Test.vue'),
        meta: {title: "测试页"}
    },
    {
        path: '/login',
        component: () =>import('@/views/login/Login.vue'),
        meta: {title: "测试页"}
    },
    {
        path: '/layout',
        //layout 是公用的，所有的都使用这个整体布局
        component: () =>import('@/layout/Layout.vue'),
        meta: {title: "整体布局"}
    },
    // 写两个 path 不多于吗？因为两个 path 作用不一样，第一个 path 可以不写
    // 但是后面会有一个 redirect 的规则，斜杠 / 会自动跳转到 ->/home，不能更加细粒度进行控制
    // 这个是单独 item 的情况，{
        path: '/home',
        component: Layout, // 整体布局，其实最后布局都是 main 和整体布局组合起来
        children: [
            {
                path: '/home',
                name: '概要', // 这个是放在侧边栏的
                icon: 'odometer',
                meta: {title: '概要'},// 浏览器的标题
                component:() =>import('@/views/home/Home.vue')// 整体布局中 main 的视图
            }
        ]
    },
    //sub menu 的情况
    {
        path: '/workload',
        name: '工作负载',
        component: Layout, // 整体布局
        icon: 'menu',
        children: [
            {
                path: '/workload/Deployment',
                name: 'Deployment', // 这个是放在侧边栏的名字
                meta: {title: 'Deployment'},// 浏览器的标题
                component:() =>import('@/views/deployment/Deployment.vue') // 整体布局中 main 的视图
            },
            {
                path: '/workload/Pod',
                name: 'Pod', // 这个是放在侧边栏的名字
                meta: {title: 'Pod'},// 浏览器的标题
                component:() =>import('@/views/pod/Pod.vue') 
            },

        ]
    }
]

const router = createRouter({history: createWebHistory(),
    routes
})

NProgress.inc(100)
NProgress.configure({easing: 'ease', speed: 200, showSpinner: false})


router.beforeEach((to, from, next) => {
    // 启动进度条
    NProgress.start()
    // 设置头部
    if (to.meta.title) {document.title = to.meta.title} else {document.title = "k8s 管理平台"}
    // 放行
    next()})


router.afterEach(() => {
    // 关闭进度条
    NProgress.done()})

// 抛出路由实例, 在 main.js 中引用
export default router

el-main 里面就放入一行代码，这里面就放入 router-view。

从 App.vue 进来有路由占位符，然后到了 home 这个地方，到了 home 这个 pass。

home pass 找到对应的 router 的配置

    {
        path: '/home',
        component: Layout, // 整体布局，其实最后布局都是 main 和整体布局组合起来
        children: [
            {
                path: '/home',
                name: '概要', // 这个是放在侧边栏的
                icon: 'odometer',
                meta: {title: '概要'},// 浏览器的标题
                component:() =>import('@/views/home/Home.vue')// 整体布局中 main 的视图
            }
        ]
    },

找到这个配置之后会去先加载整体布局。 在整体布局里面又有 main，在 main 的地方又有 router-view，这里的 router 会被 children 子的视图加载进去， 子视图被加载到了 layout 里面。layout 又被加载到了 App.vue 里面。