vue-router 路由缓存机制

当我们在输入框输入东西，防止切换的时候，输入框丢失已经填写的东西
因为路由组件切换是会被销毁的
为了用户体验要保持缓存

tongzhi.vue

 <div>
   <ul>
    <li>1.疫情情况1 <input type="text"></li>
    <li>2.疫情情况2 <input type="text"></li>
    <li>3.疫情情况3 <input type="text"></li>
   </ul>
  </div>

• 在tongzhi路由组件中添加了input，切换到其它组件后，tongzhi组件里input填写的内容消失
  要tongzhi路由组件填写的内容一直存在
  就要在展示它的的组件中添加keep-alive标签（展示它的路由组件是home.vue）

<template>
  <div>
    <router-link replace to="/home/tongzhi">通知</router-link>
    <router-link replace to="/home/message">信息</router-link>
    <button @click="forward">前进</button>
    <button @click="back">后退</button>
    <button @click="go">定点步数</button>
    <!-- 展示自己的子路由组件，要记得添加router-view这个属性标签 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

• 一定要在展示tongzhi.vue这个路由的router-view添加keep-alive
  为了优化缓存，又要把input的保持活跃，所以要加上路由组件的名字（不是路由的名字），不然所有的路由组件都被缓存不会被销毁

  <keep-alive include="t">
      <router-view></router-view>
    </keep-alive>

• t 是tongzhi路由组件的名字，看下面代码 name:t

<template>
  <div>
   <ul>
    <li>1.疫情情况1 <input type="text"></li>
    <li>2.疫情情况2 <input type="text"></li>
    <li>3.疫情情况3 <input type="text"></li>
   </ul>
  </div>
</template>

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

• 多组件缓存方式

    <keep-alive include='[t,m]' >
      <router-view></router-view>
    </keep-alive>

  <keep-alive include='["t","m"]' >
      <router-view></router-view>
    </keep-alive>

忘记这是啥了

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>