缓存路由组件

在路由的基本使用中我们介绍过：切换时，隐藏组件实质是销毁组件，显示组件实质是挂载组件。
缓存路由组件，即keep-alive。
用<keep-alive>标签将<router-view>包裹，隐藏组件时不会将组件销毁，组件依然挂载着。
<keep-ailve>标签上的属性include指定缓存哪个组件，其值是组件名。

具体看个例子，本例基于使用router中的项目。

• 修改路由组件Home.vue

<template>
  <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>
      <div>
        <keep-alive include="News">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>

</style>

• 修改路由组件News.vue

<template>
    <ul>
        <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",
    beforeDestroy(){
        console.log("News组件即将被销毁！");
    }
}
</script>

<style>

</style>

• 修改路由组件Message.vue

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <span>{{message.title}}</span>
               <button @click="pushShow(message)">push查看</button>
               <button @click="replaceShow(message)">replace查看</button>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    },
    methods:{
        pushShow(message){
            this.$router.push({
                path:"/home/message/detail",
                query:{
                    id:message.id,
                    title:message.title
                }
            })
        },
        replaceShow(message){
            this.$router.replace({
                path:"/home/message/detail",
                query:{
                    id:message.id,
                    title:message.title
                }
            })
        }
    },
    beforeDestroy(){
        console.log("Message组件即将被销毁！");
    }
}
</script>

<style>

</style>

• 启动应用，测试效果。
  
  可以看到，从"News"切换到"Message"，不会触发News组件的生命周期函数beforeDestroy的调用，News组件依旧挂载在页面上，这也是为什么切换回"News"时，News组件的三个输入框里的文本仍可保留。
  从"Message"切换到"News"，Message将被销毁，触发调用Message组件的生命周期函数beforeDestroy。