【Vant2】Tab标签页组件自动跳转的坑

使用Vant2写的一个商城，在首页有商品分类目录，比如说数码、家具、美妆等大分类，如下：

点击某个类比就会跳转到另一个页面，另一个页面中使用Tab显示分类，同时页面中显示对应分类下的商品目录，如下：

需求是：在首页点击 “电脑办公” 分类，跳转后Tab标签应该也自动定位到 “电脑办公”页签下，并且显示对应分类的商品列表。

问题是：跳转页面后Tab页签无法正确跳转到对应的页签下，但是显示的商品列表是正确的。

根据Vant2的Tab组件文档，我使用的是通过名称name来匹配激活的标签，name绑定的是分类目录的catId。

当在首页点击某个分类时，就会通过query传到这个页面，然后在页面的created生命周期获取全部分类目录，获取到后将 activeName 设为 在首页点击的分类的catId，目前为之，思路是没什么问题的，但是实践后发现并未达到预期的目的，tab的页签一直都是默认的第一个页签。

created() {
    // 获取全部分类目录
    getTopCategory().then((res) => {
      this.tabList = res.data; // tab页签列表
      this.catId = this.$route.query.catId;
      this.activeTab = this.$route.query.catId; // 匹配页签
      this.onTabClick(this.catId); // 获取对应分类下的商品列表
    });
},
1
2
3
4
5
6
7
8
9

然后观察了后台返回的tabList里面的catId，发现是number类型的，路由传递过来的是string类型的，难道vant是通过全等来匹配标签的吗？

文档中没有说，于是来到Vant的tab源码中查找，在 node_modules/vant/lib/tab/index.js 中可以看到下面这句代码

computed: {
    computedName: function computedName() {
      var _this$name;

      return (_this$name = this.name) != null ? _this$name : this.index;
    },
    isActive: function isActive() {
      var active = this.computedName === this.parent.currentName;

      if (active) {
        this.inited = true;
      }

      return active;
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以知道，它确实是使用全等的，因此，使用 Number() 将路由传递过来的参数转换成number类型，发现，还是不行。

然后又想，会不会是因为生命周期的原因呢？是不是应该等元素挂载完成后再去更改activeTab的值呢？于是就把activeTab的更改放到了mounted生命周期里，成功。

  created() {
    // 获取全部分类目录
    getTopCategory().then((res) => {
      this.tabList = res.data; // tab页签列表
      this.catId = this.$route.query.catId;
      this.onTabClick(this.catId);
    });
  },
  mounted() {
    this.activeTab = Number(this.$route.query.catId);
  }
1
2
3
4
5
6
7
8
9
10
11