移動端 vue + mintUI 實現頭部頁簽切換，按需加載~

記錄~記錄~~有時候，我們會遇到一個頁面有兩個頁簽切換需求，但是為了避免同時加載兩個頁面，我們要做到的就是當前進入的是那個頁面，就先加載哪一個頁面，並且也不會造成瀏覽器地址的變化。一開始我使用的方法是在當前頁面再加個 <router-view/> 實現二級路由，功能也是可以實現的，但是當我不停的切換的時候，瀏覽器地址也會不斷的改變，所以但我點擊瀏覽器返回鍵的時候，就會出現一個不停的返回上一個頁面，導致這兩個頁簽不停切換，到最后才能回到首頁。所以為了避免如此差的體驗，最后結合mintUI實現理想的效果，廢話不多說，具體實現如下：

<template>
    <div class="votepage">
        <div class="tab">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1" @click.native="selectChange('VoteList')">投一票</mt-tab-item>
                <mt-tab-item id="2" @click.native="selectChange('VoteResult')">看結果</mt-tab-item>
            </mt-navbar>
       </div>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item :id="selected">
                    <component :is='currentView' keep-alive></component>
            </mt-tab-container-item>            
        </mt-tab-container>
    </div>
</template>

<script>    
import VoteList from '@/components/VoteList.vue'
import VoteResult from '@/components/VoteResult.vue'
export default {
    name: 'votepage',
    data(){
          return{
              selected:"1",
              currentView:"VoteList",
          }
    },
    mounted(){

    },
    methods:{
        selectChange(view){
            this.currentView = view
        }
    },
    components:{
        VoteList,
        VoteResult
    }    
}
</script>

 

告訴自己，每天進步一點點並持之以恆~