关于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就可以。或者只要把路由配置好了就行了，多学多试
代码如下

 1 <template>
 2   <div>
 3     <mt-tab-container class="page-tabbar-container" v-model="selected">
 4       <mt-tab-container-item id="tab1">
 5       tab1内容
 6       </mt-tab-container-item>
 7       <mt-tab-container-item id="tab2">
 8       tab2内容
 9       </mt-tab-container-item>
10     </mt-tab-container>
11     <mt-tabbar v-model="selected">
12       <mt-tab-item id="tab1" class="tab1">
13         tab1
14       </mt-tab-item>
15       <mt-tab-item id="tab2" class="tab2">
16         tab2
17       </mt-tab-item>
18     </mt-tabbar>
19   </div>
20 </template>
21 <script>
22   export default {
23     data: function () {
24       return {
25         selected: 'tab1'//默认选中
26       }
27     },
28     mounted () {
29 //    this.selected = this.$route.query.selected
30 //    this.$set(this.$data, 'selected', this.$route.query.selected)
31       var tabName
32       if (location.href.split('?')[1].indexOf('tab1') !== -1) {
33         tabName = 'tab1'
34       } else if (location.href.split('?')[1].indexOf('tab2') !== -1) {
35         tabName = 'tab2'
36       }
37       document.getElementsByClassName(tabName)[0].click()
38     }
39   }    
40 </script>