轮播多个页面

将多个页面在另外的一个页面上轮播

      <template>
    <div class="allDisplay">
          <transition :name="transitionName">
              <keep-alive include="shousuo,echartsshow">
                   <!--使用页面组件 -->
                   <shousuo v-if="shousuoShow"></shousuo>
                   <echartsshow v-if="echartsIsshow"></echartsshow>
              </keep-alive>
          </transition>
    </div>
</template>
<script>
import echartsshow from "../views/Echartsshow.vue"; //作为组件引入已经写好的页面
import shousuo from "../views/shousuo.vue"; //作为组件引入已经写好的页面
export default {
    data(){
        return{
           transitionName:'turn-off',
           shousuoShow:true,
           echartsIsshow:false,
           timer:null
        }
    },
    components:{
        echartsshow:echartsshow, //注册组件名称
        shousuo:shousuo //注册组件名称
    },
    mounted(){
         this.timer=setInterval(this.intervalShow,6000)
    },
    methods:{
        intervalShow(){
            this.shousuoShow=!this.shousuoShow;
            this.echartsIsshow=!this.echartsIsshow
        }
    }
}
</script>
<style>
.allDisplay{
    width: 100%;
    height: 100%;
    position: fixed;
}
.slide-fade-enter-active{
    transition: all 1s ease;
}
.slide-fade-leave-active{
    transition: all 1s cubic-bezier(1.0,0.5,0.8,1.0);
}
.slide-fade-enter,.slide-fade-leave-to{
    transform: translateX(20px);
    opacity: 0.95;
}
.turn-on-enter{
    opacity: 1;
    transform: translate3d(100%,0,0);
}
.turn-on-leave-to{
    opacity: 1;
    transform: translate3d(0,0,0);
}
.turn-on-enter-active,.turn-on-leave-active{
    transition: all 1000ms;
    position: absolute;
    top:0;
    left: 0;
    bottom:0;
    right: 0;
}
.turn-off-enter{
    opacity: 1;
    transform: translate3d(-100%,0,0);
}
.turn-off-leave-to{
    opacity: 1;
    transition: all 1000ms;
    transform: translate3d(100%,0,0);
}
.turn-off-enter-active,
.turn-off-leave-active{
     transition: all 1000ms;
    position: absolute;
    top:0;
    left: 0;
    bottom:0;
    right: 0;
}
.turn-off-leave-active{
    z-index:-2
}
</style>