2024年Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能，2024互联网大厂Web前端面经合集

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

然后再就是面包屑，这个面包屑需要和路由去配合使用，其实也简单，首先路由文件需要修改点东西，把每个页面的标题设置一下。

import Vue from “vue”;

import VueRouter from “vue-router”;

import hello from “…/components/HelloWorld.vue”;

Vue.use(VueRouter);

const routes = [

{

path: “/”,

name: “hello”,

component: hello,

redirect: ‘/teacher’,

},

{

path: “/teacher”,

component: hello,

meta: {title: ‘页面’},

redirect: ‘/teacher/onepage’,

children: [

{

path: “onepage”,

name: “one”,

meta: {title: ‘页面一’},

component: () => import(“…/components/page01.vue”)

},

{

path: “twopage”,

name: “two”,

meta: {title: ‘页面二’},

component: () => import(“…/components/page02.vue”)

},

{

path: “threepage”,

name: “three”,

meta: {title: ‘页面三’},

component: () => import(“…/components/page03.vue”)

},

]

},

{

path: “/student”,

component: hello,

meta: {title: ‘m页面’},

redirect: ‘/student/monepage’,

children: [

{

path: “monepage”,

name: “mone”,

meta: {title: ‘m页面一’},

component: () => import(“…/components/mpage01.vue”)

},

{

path: “mtwopage”,

name: “mtwo”,

meta: {title: ‘m页面二’},

component: () => import(“…/components/mpage02.vue”)

}

]

},

{

path: “/about”,

name: “About”,

component: () =>

import(/* webpackChunkName: “about” */ “…/views/About.vue”)

}

];

const router = new VueRouter({

mode: “history”,

base: process.env.BASE_URL,

routes

});

export default router;

就像上面那个样子。

然后就是面包屑组件需要获取这个路由名称然后渲染出来，其实很简单。

{{item.meta.title}}