Web前端最全Vue element-plus 导航栏 [el-menu](1)，前端开发面经分享

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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

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。


![](https://img-blog.csdnimg.cn/direct/00b763891c964b94b7aeb7d20f1b799a.png)


![](https://img-blog.csdnimg.cn/direct/cad688c77fb44593af301196dd40a963.png)


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

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

文末