2024年前端最新Vue element-plus 导航栏 [el-menu](2)，2024年最新最新阿里前端高级面试题及答案

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

第一步：写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的视图
            }


### 最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

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

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


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