解决vantUI底部tabbar导航与页面不对应问题(window.loaction.hash)

前言

有一个需求是利用vant底部的tabbr组件，搭配vueRouter，实现路由导航。需要自定义图标，并且选中后图标应该变换选中后的样式。vantui是提供了路由模式的tabbar的，但是好像不支持自定义图标。所以用了下图的方法：

使用后，发现一个问题，就是如果进入二级页面，也就是不包含tabbar组件的页面，那么当前选中的tabbar项就丢失了，会变回默认的0，所以必须在离开tabbar组件所在页面的时候，记住当前选中的tabbar项或者判断当前路由，实现根据路由重新初始化tabbar所对应的active。方便起见，我选择了后者。

解决

  created() {
    /*解决进入二级路由返回默认选中首页tab的问题*/
    const navBarActive = window.location.hash;
    if(navBarActive.includes("#/home")){
      this.active = 0;
    } else if(navBarActive.includes("#/baike")){
      this.active = 1;
    } else if(navBarActive.includes("#/mall")){
      this.active = 2;
    } else if(navBarActive.includes("#/cart")){
      this.active = 3;
    } else if(navBarActive.includes("#/me")){
      this.active = 4;
    }
  }

vue-router是基于window.loaction的hash属性来实现的，所以每次回到主页面，也就是包含tabbar组件的页面时，判断当前页面所对应的地址的hash，再逐个和对应的tabbar所对应的路由做比较，如果符合，就选中对应的tabbar项，即给active赋值。这里之所以没有使用switch来判断，是因为页面地址可能带参数，所以不能直接navBarActive和路由做相等的判断，而是包含的关系。

写在最后

因为vue-router是基于window.location的hash属性的，所以很多和路由相关的问题可以从window.location入手。在控制台打印出window.location:

可以看到关于当前页面地址的信息，hash属性其实就对应了我们配置的对应页面的路由，我们还可以通过window.location.href来更改页面地址。