关于vue2 mint-ui tabbar 按需要默认选中

tabbar是和tab-container一起使用的，点击不同的tab里面有不同的内容
tab-container里的每一个container-item的id要和tabbar里的tab-item的id对应上，v-model是绑定的选中数据变量(值应该为tab-item的id中的一个)，默认可以在data函数里设置，这样一进页面就会有一个默认选中了
然后有个需求是从不同的入口点击进来想直接默认到不同的tab里，比如有一个关于tab1内容的链接点进来直接默认就选中tab1，tab2内容的链接点进来默认就显示tab2
区分链接来源直接在url后面加了一个k=v对，开始的时候用vue-router里的路由信息对象this.$route.query.selected，在本地测试是可以的，但是一到手机上就不行了，调了好多次，试了试this.$set()也不行，以为是生命周期函数放错了，放在别的周期里也不行
本来想着以vue的方式来解决问题，貌似卡住了。无奈开了手机调试直接用chrome inspect调试才发现this.$route.query.selected这个值根本没取到是undefinded。。
复制url到手机浏览器的时候url末尾出现了一个#/不知道是怎么来的，微信里直接复制是没有的，应该是这个问题导致没取到url参数
最后直接用location了。。效果如下图，tab2链接进来默认就选中tab2

想想多出来的这个#/应该是默认的路由根目录，vue应该可以去掉，react就可以。或者只要把路由配置好了就行了，多学多试
代码如下

<template>
  <div>
    <mt-tab-container class="page-tabbar-container" v-model="selected">
      <mt-tab-container-item id="tab1">
      tab1内容
      </mt-tab-container-item>
      <mt-tab-container-item id="tab2">
      tab2内容
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="tab1" class="tab1">
        tab1
      </mt-tab-item>
      <mt-tab-item id="tab2" class="tab2">
        tab2
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        selected: 'tab1'//默认选中
      }
    },
    mounted () {
//    this.selected = this.$route.query.selected
//    this.$set(this.$data, 'selected', this.$route.query.selected)
      var tabName
      if (location.href.split('?')[1].indexOf('tab1') !== -1) {
        tabName = 'tab1'
      } else if (location.href.split('?')[1].indexOf('tab2') !== -1) {
        tabName = 'tab2'
      }
      document.getElementsByClassName(tabName)[0].click()
    }
  }    
</script>