[vue3] 统一页面导航标签

✨✨博主简介:一个会bbox的‍

✨✨个人主页:沫洺的主页

 系列专栏:  JavaWeb专栏 JavaSE专栏  Java基础专栏vue3专栏

如果文章对你有所帮助请留下三连✨✨

效果图

实现内容

• ElementPuls页面布局(上上章)
• 动态菜单显示(上上章)
• 实现菜单折叠效果(上一章)
• 实现部分页面不使用整体框架(下一章)
• 统一页面导航标签(本章)

统一页面导航标签

 新建components/NavHead.vue

 使用watch()侦听

 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

 这样再执行强制回退就不会出现上面那种情况了

 完事!!!

总结说明 

这部分内容有很多细节点,在代码中的注释都有详细解释,在图片中也有大概的一个思路进行分析,最终的目的就是为了将标签页和菜单项完美的进行关联,并且解决上述的两种场景