vue项目实践教程3：中间大的五选项底部切换卡制作及相关问题解决

在移动端项目中，有不少项目会有底部切换卡的功能需求，类似于app应用，点击底部不同的切换卡，显示不同的界面，表现不同的功能。

这里，笔者展示一个采用vux-uid 五选项切换卡，同时，中间的选项卡比较突出，样式如下：



样式表现比较好看，其实表现起来也很简单。

如果不考虑中间的图片突出，整体的表现直接参照vux官方文档的Tabbar就可以很简单的实现，vux tabbar

在这里，中间的图标是一张图片，我们放大图片，然后调整位置就可以实现中间图标突出的效果。

vux单页面应用选项卡如何切换页面:

点击不同的选项卡，触发不同的事件，跳转到不同的路由，就可以跳转到对应的页面中，当然，切换卡和router-view同级才可以。

刷新页面选项卡选中错位问题

在单页面应用中，通过点击下方对应的选项卡显示对应的页面之后，在刷新页面的情况下，下方的选项卡会出现不对应的情况，比如：默认显示第一个选项卡内容，点击第三个选项卡显示页面之后，刷新页面，选项卡就会自动变为选中第一个选项卡状态，页面内容仍然是第三个选项卡内容。

解决办法：

根据路由进行判断，根据具体的路由，选择限制选中的选项卡。

项目示例代码请看这里