标签页

Tabbar

实验题目
标签页的设计与开发
实验目的

综合运用 Vue 框架知识点,设计并开发标签页

实验内容
介绍

标签页 Tabbed Navigation 是一种常见的用户界面设计模式,用于在同一个页面区域内切换展示不同的内容模块

它通常由一组标签 Tabs 和对应的内容区域 Panels 组成,用户点击某个标签时,会切换显示与该标签相关的内容

特点

节省空间:通过切换方式展示多个内容块,避免页面跳转

提升用户体验:直观、便捷地在不同功能或分类之间切换

结构清晰:将相关内容分组管理,增强信息的可读性

实现

. 普通方法

. 监听 watch()

. 自动监听 watchEffect()

. 动态组件 Dynamic

. 动态组件缓存 Dynamic / <KeepLive>

. 路由 Router

参考效果和参考代码
普通方法 静态类/动态类
监听 watch()
自动监听 watchEffect()
动态组件 Dynamic
动态组件缓存 Dynamic / <KeepLive>
路由 Router
拓展与思考
分析不同方法的特点
引入数据加载