解决tab切换时组件中输入的内容消失

作用：让不展示的路由组件保持挂载不销毁

<template>

    <div><!--这个div不能少，不然编译会卡住-->

        <h2>我是Home的内容</h2>

        <div>

            <ul class="nav nav-tabs">

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

                </li>

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>

                </li>

            </ul>

            <!--table切换时keey-alive标签中被inlucde指定的组件输入的数据切换时不会消失-->

            <!--如果不指定include则所有的输入都缓存，这里的include是组件名-->

            <!--如果要指定多个：<keep-alive :include="['News','aaa']"></keep-alive>-->

            <keep-alive include="News">

            <router-view></router-view>

            </keep-alive>

        </div>

    </div>

</template>

下面又会出现一个新的问题：假如news组件中的input需要缓存，但定时器切换时要停止提高性能，这就出现矛盾了

解决方法：

<template>

    <ul>

        <li :style="{opacity}">www.hu-rong.com</li>

        <li>news001 <input type="text"></li>

        <li>news002 <input type="text"></li>

        <li>news003 <input type="text"></li>

    </ul>

</template>

<script>

    export default {

        name:'News',

        data(){

            return {

                opacity:1

            }

        },

        beforeDestroy(){

            console.log('News组件即将被销毁')

        },

        activated(){

            console.log('News组件被激活了')

            this.timer=setInterval(()=>{

                console.log('定时器还活着')

                this.opacity-=0.01

                if(this.opacity<=0)this.opacity=1

            },16)

        },

        deactivated(){

            console.log('News组件失活了')

            clearInterval(this.timer)

        }

    }

</script>

<style>

</style>