使用keep-alive组件实现vue页面间的无缝切换

<template>  <div>    <button @click="switchPage">切换页面</button>    <transition name="fade">      <keep-alive :include="cachedComponents">        <component :is="currentPage"></component>      </keep-alive>    </transition>  </div></template><script>import PageA from './PageA.vue'import PageB from './PageB.vue'export default {  data() {    return {      currentPage: 'PageA',      cachedComponents: ['PageA', 'PageB'] // 需要缓存的组件列表    }  },  methods: {    switchPage() {      this.currentPage = this.currentPage === 'PageA' ? 'PageB' : 'PageA'    }  },  components: {    PageA,    PageB  }}</script><style>.fade-enter-active,.fade-leave-active {  transition: opacity 0.5s;}.fade-enter,.fade-leave-to {  opacity: 0;}</style>

<!-- PageA.vue --><template>  <div>    <h1>PageA</h1>    <!-- 页面内容 -->  </div></template><!-- PageB.vue --><template>  <div>    <h1>PageB</h1>    <!-- 页面内容 -->  </div></template><script>export default {  // 页面组件的逻辑和内容}</script>

// main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'new Vue({  router,  render: h => h(App)}).$mount('#app')