2024年前端最新Vue element-plus 导航栏 [el-menu]，前端研发岗面试复盘总结

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

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

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

以后所有的路由规则，要不里面是一个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的配置

    {


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)