移动端H5开发如何设计实现底部 Tab 栏切换的功能？

Question

关键信息：前端、web应用、vue、vue-router

在公司的项目遇到了底部 tab 栏切换的场景，类似于 appstore 底部 tab 的模式，如下图：

我在最开始开发的时候，选择每个 tab 都是一个大的路由，结构如下：

{
    path:"tab1",
    children:[{}]
},
{
    path:"tab2",
    children:[{}]
},
{
    path:"tab3",
    children:[{}]
}

但是这种单页面设计模式会遇到的问题就是在切换 Tab1 到 Tab2 的时候，此时我想做的只是隐藏 Tab1 而不希望这个页面整个卸载掉(排除使用 keep-alive) ，因为此时如果我从 Tab2 切回 Tab1 的时候，Tab1 中所有网络请求就需要重新再走一遍，感觉很没必要。

我期望的效果就像 appstore 这样，他们好像都是独立的页面，就好像不是一套路由系统一样，他们之间切来切去不会影响各自的页面滚动高度，并且数据也不需要重新获取。

问题： 是否有更好的设计模式来设计这样的移动端结构呢？

Answer 1

那直接在一个页面用把 tab 组件化,这样切换的时候就控制组件的显隐