vue中的keep-alive简单使用

Vue中keep-alive的使用

Vue中keep-alive的使用
首先简述一下keep-alive的作用，keep-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候，默认会销毁，当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件，保持原来的状态，此时用keep-alive就可以实现了

1. 在需要缓存的组件路由上面添加meta:{KeepAlive:true}

new VueRouter({
   routes:[
   	{
   		path:"/keepAlive",
   		name:"keepAlive",
   		meta:{keepAlive:true},
   		component:()=>import("../components/keepAlive")
   	},
   ]
})

2.使用keep-alive包裹住需要缓存的组件 并进行条件判断

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