mint ui的tabBar監聽路由變化實現tabBar切換

說明

• 最近學習vue，使用了mint ui的tabBar，感覺好難受，結合 tab-container使用更難受，因為它不是根據路由來切換頁面的。mui與它基本相反，因此它能根據搜索欄的路由變化，相應的tabBar高亮顯示，而mint ui就不能，要加點代碼實現了。

• mint ui tabBar標簽欄

    //頁面 和 數據
    <template>
        <div id="main">
            <mt-tabbar v-model="selected">
                <mt-tab-item :id="home">
                    首頁
                </mt-tab-item>
                <mt-tab-item :id="car">
                    購物車
                </mt-tab-item>
                <mt-tab-item :id="person">
                    我的
                </mt-tab-item>
            </mt-tabbar>
        </div>
    </template>

    <script>
        export default {
            data(){
                return {
                    //頁面刷新取數據
                    selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首頁',
                    home: '首頁',
                    car: '購物車',
                    person: '我的',      
                }
            }
        }
    </script>

• 監聽路由的變化
  • 監聽路由的變化，那就要使用到偵聽器 watch 了。一旦selected變化，就保存到 sessionStorage，當頁面刷新的時候，在初始化數據取出即可。

 data(){
         return {
            //默認顯示首頁，但是一旦sessionStorage有數據 當瀏覽器刷新的時候，取出該值，就實現了刷新不跳轉了
            selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首頁'
        }   
 },
 watch: {
        selected(val, oldVal){
            //一旦標簽欄變化，把selected的值存到sessionStorage，保存當前值
            sessionStorage.setItem('selected', JSON.stringify(val))
            if(val === this.home){
                //路由跳轉 到首頁
                this.$router.replace('/home')          
            }else if(val === this.car){
                //路由跳轉 到購物車
                this.$router.replace('/car')            
            }else if(val === this.person){
                //路由跳轉 到個人中心
                this.$router.replace('/person')           
            }
        }