vue 组件状态缓存，keep-alive

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.

一、设置include、exclude

<keep-alive include='page1,page2'>
	<component1 />
	<component2 />
	...	<!-- component中 name 为 page1 或 page2 的页面将会被缓存 -->
<keep-alive>

<keep-alive exclude='page3,page4'>
	<component1 />
	<component2 />
	...	<!-- component中 name 为 page3 或 page4 的页面将不会被缓存 -->
<keep-alive>

二、配合vue-router

1. router/index.js 在对应的页面路由配置中添加meta.keepAlive

   // router/index.js
   const routes = [
   	{
   		path: '/page1',
   		component: () => import('../views/page1.vue'),
   		meta: {
   			keepAlive: true	// 页面将会被缓存
   		}
   	},
   	{
   		path: '/page2',
   		component: () => import('../views/page2.vue')，
   		meta: {
   			keepAlive: false // 页面将不会被缓存
   		}
   	}
   ]
   

2. 使用两个<router-view>

   <keep-alive>
   	<router-view v-if="$route.meta.keepAlive">
   		<!--这里会显示会被缓存的路由页面-->
   	</router-view>
   </keep-alive>
   
   
   <router-view v-if="!$route.meta.keepAlive">
   	<!--这里会显示不被缓存的路由页面-->
   </router-view>