關於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>