Vue缓存路由组件

作用： 让不展示的路由保持挂载，不被销毁 具体编码：

<template>
  <div>
    <h2>我是Home的内容</h2>
      <router-link to="/home/news">News</router-link>
      <router-link to="/home/message">Message</router-link>
      <hr/>
<!-- include属性配置的是需要缓存的组件名   -->
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
  </div>
</template>

理解：

比如用户输入一堆东西，点击路由切换出去回来后就会丢失数据，比如输入框已经填写好的文本，原因在于默认路由组件在路由切换的时候会被销毁，切换回来重新渲染数据自然丢失。 使用keep-alive后，组件不会被销毁

如果不指定include属性，会缓存里面所有的<router-view>路由组件。如果需要缓存指定的多个可以这样：

<keep-alive :include="['News', 'Message']">
    <router-view></router-view>
</keep-alive>