移动端 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>

 

告诉自己，每天进步一点点并持之以恒~