[vue3] 统一页面导航标签

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

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

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

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

效果图

[vue3] 统一页面导航标签_第1张图片

实现内容

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

统一页面导航标签

 新建components/NavHead.vue

 使用watch()侦听[vue3] 统一页面导航标签_第2张图片

 NavHead.vue


 App.vue中导入文件,并引用

[vue3] 统一页面导航标签_第3张图片

 看一下监听效果

[vue3] 统一页面导航标签_第4张图片

  使用Tabs标签设置导航标签

[vue3] 统一页面导航标签_第5张图片

  复制template和script标签的内容到NavHead.vue中查看效果[vue3] 统一页面导航标签_第6张图片

  对原有的代码进行改动,不需要的功能可以不要[vue3] 统一页面导航标签_第7张图片

 [vue3] 统一页面导航标签_第8张图片

  对代码进行改进(有注释可参考)

 NavHead.vue


[vue3] 统一页面导航标签_第9张图片

  • 将Tab标签和左边的Aside部分里的Menu菜单进行关联,也就是动态显示Tab标签页,当点击Menu菜单项时就会在Tab标签页中显示对应的标签页
  • 当点击菜单项时,Tab标签页中如果已经存在对应的标签页时,就不需要再添加标签页,保证其唯一性
  • 实现动态关联之后在Main部分中同样的显示Menu菜单项的内容(tab-change)
  • 默认显示首页标签页(当初始状态时,总要显示一个首页,因此首页就不需要移除按钮,作为初始化的数据显示)
  • 实现本地存储,当关闭网页后,再次访问所关闭的网页的路径,会通过本地存储恢复之前的状态信息,
  • 实现当页面信息发送改变时,切换标签页时信息不被消除(场景一)
  • 实现强制回退路径,页面初始化(场景二)

  NavHead.vue


      //定义一个editableTabs数组,里边放初始化元素
       editableTabs:[{
        title: '主页',
        name: 'home',
        close: false,
      }],
      //当前活动标签,默认显示name:'home'的元素
       editableTabsValue:"home"

解释说明

首页默认初始化显示,不需要移除

[vue3] 统一页面导航标签_第10张图片[vue3] 统一页面导航标签_第11张图片

 动态关联菜单项和标签页[vue3] 统一页面导航标签_第12张图片

  标签页改变时触发,路由跳转,实现菜单项内容显示

[vue3] 统一页面导航标签_第13张图片

 [vue3] 统一页面导航标签_第14张图片

 其他的细节说明都在代码注释中

 效果图

[vue3] 统一页面导航标签_第15张图片

实际操作场景一

 接下来解决一种场景

[vue3] 统一页面导航标签_第16张图片

 就比如

[vue3] 统一页面导航标签_第17张图片

 但是当切换标签页后,会发现之前写的数据销毁了

[vue3] 统一页面导航标签_第18张图片  那怎么让这样的普通数据保存呢

  一般的数据信息都是通过KeepAlive进行存储的

[vue3] 统一页面导航标签_第19张图片

 将之前写的改成下边的代码

          
              
                
              
          

[vue3] 统一页面导航标签_第20张图片

[vue3] 统一页面导航标签_第21张图片[vue3] 统一页面导航标签_第22张图片

实际操作场景二

还有一种场景就是当强制回退路径时,主动打开的标签页还存在

[vue3] 统一页面导航标签_第23张图片

[vue3] 统一页面导航标签_第24张图片解决办法就是在初始页面(首页)中通过过滤进行数据初始化

Home.vue



[vue3] 统一页面导航标签_第25张图片

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

 完事!!!

总结说明 

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

你可能感兴趣的:(vue3,前端)