2024年最新vue3+Element采用递归调用封装导航栏_element递归生成导航(2)，2024年最新2024字节跳动前端面试真题解析

分享

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

## 递归实现导航栏渲染


* 对于导航栏渲染难点在于不知道有多少层级的导航，可能一级也可能两级或者更多
* 为了方便采用两个组件父组件aside.vue与子组件subAside.vue渲染导航
* 这时候就需要采用递归的方式
	+ 首先判断哪些数据需要渲染，需要的拿出来
	+ 判断是否有子节点需要渲染
		- 有子节点，递归调用子组件本身
		- 没有子节点，返回导航项进行渲染


### 父组件aside.vue

expand collapse

父组件处理后的用于渲染的数据

[
{
component: () => import(‘/src/views/Home.vue’)
meta: {title: ‘首页’, icon: ‘’, inSide: true}
name: “Home”
path: “/home”
},
{
component: () => import(‘/src/views/About.vue’)
meta: {title: ‘个人中心’, icon: ‘’}
name: “User”
path: “/user”
chilren:[
{
children: [{…}]
component: () => import(‘/src/views/Users/Avatar.vue?t=1655544364909’)
meta: {title: ‘修改头像’}
name: “Avatar”
path: “/user/avatar”
},
{
component: () => import(‘/src/views/Users/Password.vue’)
meta: {title: ‘修改密码’}
name: “Password”
path: “/user/password”
}
]
},
{
meta: {title: ‘系统设置’, icon: ‘’}
name: “SetUp”
path: “/setUp”
chilren:[
{
component: () => import(‘/src/views/Users/Avatar.vue?t=1655544364909’)
meta: {title: ‘暂无’}
name: “setUp”
path: “/setUp/avatar”
},
{
component: () => import(‘/src/views/Users/Avatar.vue?t=1655544364909’)
meta: {title: ‘暂无’}
name: “setUp”
path: “/setUp/avatar”
}
]
}
]

### 子组件subAside.vue

## 配置


1. 版本

“vue”: “^3.2.25”,
“element-plus”: “^2.2.6”,

2. main.ts中配置

import { createApp } from ‘vue’;
import App from ‘./App.vue’;
// import ‘virtual:windi.css’;
import router from ‘./router/index’;
/**
* 引入elment
*/
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import ‘element-plus/theme-chalk/dark/css-vars.css’
import ‘./styles/dark/css-vars.css’

// 引入 Pinia 状态管理工具
import pinia from ‘./stores’

const app=createApp(App)
/**
* 全局注册组件
*/
import SubAside from ‘./components/subAside.vue’
app.component(‘SubAside’, SubAside)

// 注册Element全局可用
app.use(ElementPlus).use(router).use(pinia).mount(‘#app’);

### 最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

![](https://img-blog.csdnimg.cn/img_convert/3e2f7f8cee413f117e3d29ebafef4489.webp?x-oss-process=image/format,png)

抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

[外链图片转存中...(img-s5LXByxx-1715708989969)]