分享
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
## 递归实现导航栏渲染
* 对于导航栏渲染难点在于不知道有多少层级的导航,可能一级也可能两级或者更多
* 为了方便采用两个组件父组件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)]