vux tabbar组件 keep-alive使用

最新推荐文章于 2024-05-20 14:31:08 发布

best-toby

最新推荐文章于 2024-05-20 14:31:08 发布

阅读量895

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vux vue tabbar

本文链接：https://blog.youkuaiyun.com/besttoby01/article/details/84103559

vue 专栏收录该内容

16 篇文章

订阅专栏

本文解决了一个在Vue项目中使用vux组件库的tabbar组件时，因页面缓存导致底部选中项混乱的问题。通过使用computed属性动态判断当前路由，实现了正确的选中状态显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

vue使用了vux组件，一级页面使用了tabbar组件，但是两个一级页面需要缓存，以保证切换的消耗量。开启缓存后，出现了底部的选中项混乱，每次点击都是慢一拍。

解决方案：

定义组件的时候，我不是传参来表示了。而是直接使用computed函数来判断selected的值。通过判断path的值，来判断是否选中盖页面。

代码：

selected() {
      let path = this.$route.path,
        index = 0;
      switch (path) {
        case "/":
          index = 0;
          break;
        case "/personal":
          index = 1;
          break;
        default:
          index = 0;
          break;
      }
      return index;
}