vue使用vant中tabbar组件点击两次高亮,获取地址栏地址

刚开是使用这个组件的想法就是每一个页面写一遍这个组件，于是乎写了4遍。但是呢，这就带出了这次的主要问题，就是tab点击两次才会出现高亮。

其实，每个页面都会出现的内容，写在公共的主页面即可，例如：App.vue中。在这里写一遍就解决了这个bug.

 这个问题到这里就得到了解决。

但是呢，又遇到一个问题。

点了分类之后，刷新页面，高亮的与实际页面不同。于是乎我想用当前页面的地址来解析。第一想到的使用

this.$route.name属性来判断

这个方法在我修改完乍一看，哎哟 不错，实现了

 我拿到了当前url中的页面name.当我奋笔疾书写完所有的逻辑后，我点了浏览器左上角的刷新，此时。。。。就出问题咯

 name居然成为null了。这个方法就放弃了。只能用window类的方法了。

// 获取当前地址栏地址，判断在哪一个页面高亮底部按钮
    getUrl() {
      let url = window.location.href; // 获取地址栏地址
      let list =["home","message","kind","customer"]  // 每个页面的name
      let name = list.filter(item=>{
        // match：判断url中是否包含当前item的字符串，如果有返回一个数组，若无返回null
        return url.match(item) ? url.match(item)[0] : null
      })
      if(name[0] === 'customer') {
        this.active = "4"
      } else if (name[0] === 'kind') {
        this.active ="2"
      } else if (name[0] === 'message') {
        this.active ="3"
      } else {
        this.active ="1"
      }
    },