✨✨博主简介:一个会bbox的
✨✨个人主页:沫洺的主页
系列专栏: JavaWeb专栏 JavaSE专栏 Java基础专栏vue3专栏
如果文章对你有所帮助请留下三连✨✨
- ElementPuls页面布局(上上章)
- 动态菜单显示(上上章)
- 实现菜单折叠效果(上一章)
- 实现部分页面不使用整体框架(下一章)
- 统一页面导航标签(本章)
新建components/NavHead.vue
NavHead.vue
App.vue中导入文件,并引用
看一下监听效果
使用Tabs标签设置导航标签
复制template和script标签的内容到NavHead.vue中查看效果
对代码进行改进(有注释可参考)
NavHead.vue
- 将Tab标签和左边的Aside部分里的Menu菜单进行关联,也就是动态显示Tab标签页,当点击Menu菜单项时就会在Tab标签页中显示对应的标签页
- 当点击菜单项时,Tab标签页中如果已经存在对应的标签页时,就不需要再添加标签页,保证其唯一性
- 实现动态关联之后在Main部分中同样的显示Menu菜单项的内容(tab-change)
- 默认显示首页标签页(当初始状态时,总要显示一个首页,因此首页就不需要移除按钮,作为初始化的数据显示)
- 实现本地存储,当关闭网页后,再次访问所关闭的网页的路径,会通过本地存储恢复之前的状态信息,
- 实现当页面信息发送改变时,切换标签页时信息不被消除(场景一)
- 实现强制回退路径,页面初始化(场景二)
NavHead.vue
//定义一个editableTabs数组,里边放初始化元素 editableTabs:[{ title: '主页', name: 'home', close: false, }], //当前活动标签,默认显示name:'home'的元素 editableTabsValue:"home"
解释说明
首页默认初始化显示,不需要移除
标签页改变时触发,路由跳转,实现菜单项内容显示
其他的细节说明都在代码注释中
效果图
接下来解决一种场景
就比如
但是当切换标签页后,会发现之前写的数据销毁了
一般的数据信息都是通过KeepAlive进行存储的
将之前写的
改成下边的代码
还有一种场景就是当强制回退路径时,主动打开的标签页还存在
Home.vue
首页
这样再执行强制回退就不会出现上面那种情况了
完事!!!
这部分内容有很多细节点,在代码中的注释都有详细解释,在图片中也有大概的一个思路进行分析,最终的目的就是为了将标签页和菜单项完美的进行关联,并且解决上述的两种场景