对指定组件进行keep-alive缓存(Vue)

keep-alive

<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，主要用于保留组件状态或避免重新渲染

实际项目中：

• 对有网络请求的页面进行缓存，则重新回到该页面时，不会再请求数据，在一定程度上能减少网络请求，优化性能；
• 但在另一方面，如果返回上一页面时，需要刷新状态，此时就不太适用了

当组件在 <keep-alive>内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。可以在activated时进行刷新操作，但是这个做法则需要在每个要刷新的页面都写一次，效率太低。

对指定组件进行keep-alive缓存

做法1：

利用keep-alive的include或exclude属性（每个组件需要指定name，include和exclude属性需要对应组件name）

<!-- com1.vue -->

<template>
...
</template>
<script>
export default {
	name: "com1"
	...
}
</script>

---

<!--对除了com1,com2的其他所有组件进行缓存【com1,com2不缓存】-->
<keep-alive exclude="com1,com2">
	<routerView />
</keep-alive>

---

或者

---

<!--仅对com1,com2进行缓存-->
<keep-alive include="com1,com2">
	<routerView />
</keep-alive>

做法2:

利用路由meta指定是否keepAlive实现

1. router.js

   {
   		path: '/com1',
   		name: 'com1',
   		component: () => import(/* webpackChunkName: "com1" */ '../views/com1.vue'),
   		meta: {
   			keepAlive: false	//不缓存
   		}
   },
   {
   		path: '/com2',
   		name: 'com2',
   		component: () => import(/* webpackChunkName: "com2" */ '../views/com2.vue'),
   		meta: {
   			keepAlive: true		//缓存
   		}
   },
   

2. App.vue

   <div id="app">
       <keep-alive>
   		 <router-view v-if="$route.meta.keepAlive" />
       </keep-alive>
       <router-view v-if="!$route.meta.keepAlive" />
   </div>