首页 前端知识 Vue element-plus 导航栏 [el-menu]

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

2024-05-08 10:05:40 前端知识 前端哥 382 31 我要收藏

导航栏 [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  style="background-color:royalblue">
                   <router-view></router-view>
                </el-main>

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

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

<template>
  <router-view></router-view>
</template>

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里面。

                <el-main  style="background-color:royalblue">
                   <router-view></router-view>
                </el-main>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7447.html
标签
评论
发布的文章

Pycharm创建json文件类型

2024-05-12 00:05:50

C#Post请求,带json参数。

2024-05-12 00:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!