九、缓存路由组件

1、需求

在 News 栏下每条新闻后面加一个输入框并手动输入内容，要求切到其他路由再回来 输入的内容依然在

2、分析一波

由于路由跳转会把之前的组件A销毁再挂载要跳转的B组件，再跳回去又会销毁当前组件B再重新挂载A组件，此时整个组件都是新的，原来的输入早销毁了，想要保留的话就是缓存一下，跳回来的时候直接从缓存取。

如果不清楚这点的小伙伴可以在组件 beforeDestory 钩子上输出点ACD数，你一跳转就会弹出你的ACD数

3、keep-alive 标签

<template>
	<div>
		<!-- ... -->
		<div>
			<!-- 挂上这个标签即可缓存其包裹的所有组件，也可以通过 include 指定哪些需要缓存 -->
			<!-- 注意！include 里配的是组件名（就是组件里的name属性！） -->
			<keep-alive include="News"><!-- 多个 :include="['News', 'Details']" -->
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

4、总结

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

2. 具体编码：

   <keep-alive include="News"> <!-- 不配置include(组件名)、则所有的组件都会缓存 -->
       <router-view></router-view>
   </keep-alive>
   
   <keep-alive :include="['News', 'Home']"> <!-- 多个组件传输组 -->
       <router-view></router-view>
   </keep-alive>