动态组件 & 异步组件:在动态组件上使用 keep-alive

<div id="demo">
    <div class='container'>
        <div class="row">
            <button class="btn btn-default" v-on:click="changeShow">change page</button>
            <keep-alive>
                <component :is="show"></component>
            </keep-alive>
        </div>
    </div>
  </div>
  
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  <script>
   var vm = new Vue({
      el:"#demo",
      data:{
        show:"pageFirst"
      },
      components:{
        pageFirst:{
            data:function(){
                return {showColor:'red'}
            },
            template:`
                <div v-bind:style="{backgroundColor:showColor,width:'60px',height:'60px'}" 
                 v-on:click="changeColor" ></div>
            `,
            methods:{
                changeColor(){
                    if(this._data.showColor === "red") this._data.showColor = "black"
                    else this._data.showColor = "red"
                }
            }
        },
        pageSecond:{
            template:`
                <div>222</div>
            `
        }
      },
      methods:{
        changeShow(){
            debugger
            if(this.show === "pageFirst") this.show = "pageSecond"
            else this.show = "pageFirst"
        }
      }
    })

//参考： https://blog.csdn.net/wust_cyl/article/details/82986620

    //参考： 萌新入坑91 https://www.cnblogs.com/gongshunfeng91/p/11282133.html