vue组件缓存 keep-alive

今天需要用到组件缓存在页面第二次进入的时候，会刷新，就开始在百度搜索使用方法，看来很多写的很好，我在组件里面使用没有效果（不是app.vue），就在b站上面找了一个视频看来一下，才发现我写的有问题，百度上很多文章都没有写keep-alive需要写app.vue组件里面

方法一（我喜欢用的所以放在前面）

//app.vue
 	<template>
	<div class="">
		<keep-alive>
			//判断是否有组件需要被缓存
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		//必须要写两个 这个是不需要被缓存的组件
		<router-view v-if="!$route.meta.keepAlive"></router-view>
	</div>
	
</template>

router/index.js文件

{
	path: '/home',
	name: 'Home',
	component: () => import('../view/Home.vue'),
	meta:{ //不被缓存可以不写 或者 写为false
		keepAlive:true
	}
},

方法二
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

//app.vue组件
<template>
	<div class="">
		//include匹配到名字的会被缓存，二次进入不会被刷新
		<keep-alive include="name">
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

3.方法三
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

//app.vue组件
<template>
	<div class="">
		//exclude匹配到名字的不会被缓存，和上面的取反
		<keep-alive exclude="name">
			<router-view></router-view>
		</keep-alive>
	</div>
</template>