大数据毕业设计之前端08：导航栏动态添加tabs，vue如何实现

前言

之前的几篇文章都是基于comtainer布局的aside边栏部分来写的，像logo、menu以及Icon图标组件，后面也写了关于路由动态加载和菜单渲染的文章。

今天就撤离aside，来讲一下header部分的实现。

NavBar导航栏

在BuidAdmin中，header部分实现了NavBar。可以看到NavBar由两部分构成，一个是左侧的可变的tab页，一个是右边固定的菜单栏。

通过源码，来看看BuildAdmin的header是如何实现的。

可以看到header的内容是由 <component> 动态组件实现的，使用is属性绑定不同的导航栏组件。通过修改pinia定义的状态变量 config.layout.layoutMode，然后拼接NavBar，来映射defineComponent中的导航组件。

pinia中定义了四种布局模式，Default|Classic|Streamline|Double，默认是Default。不同的布局也定义了不同的NavBar。这里看一下效果。

一开始BuildAdmin使用的就是默认布局。我在这里不需要使用动态组件，也不需要实现其他三个布局组件，我只实现一个默认布局的navBar。我们在navBar目录下查看默认布局中navBar是如何定义的。

从default.vue也可以看到，NavBar是由NavTabs和NavMenus两个组件组成的 这里就先看tabs的实现。

NavTab

用开发者工具查看源码，分析tab的实现。