Vue学习笔记68--缓存路由组件

缓存路由组件

1.  作用：让不展示的路由组件保持挂载、不被销毁(eg：常用于，缓存录入的数据)
2. 具体实现：

   <!-- include="News" 组件名，如果不添加配置，则缓存router-view中展示的组件 -->
   <keep-alive include="News">
       <router-view></router-view>
   </keep-alive>

    注：当需控制多个组件被缓存时，则需要使用数组形式==》<keep-alive :include="['News','Message']">.......

示例如下：

<template>
  <div>
    <h3>home page</h3>
    <div>
      <ul class="nav nav-tabs">
        <li style="margin: 10px;"><router-link to="/home/News">News</router-link></li>
        <li style="margin: 10px;"><router-link to="/home/Message">Message</router-link></li>
      </ul>
 9 
10       <!-- include="News" 组件名，如果不添加配置，则缓存router-view中展示的组件 -->
11       <keep-alive include="News">
12         <router-view></router-view>
13       </keep-alive>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',

}
</script>

<style>
</style>