前言

Vue组件实现缓存很简单,用keep-alive包起来要缓存的元素即可。

keep-alive用法

<keep-alive></keep-alive>,用来开关直接子元素,如果有多个条件性的子元素, 要求同时只有一个子元素被渲染。keep-alive跟transition一样,不会生成DOM;其include属性,用来指定要缓存组件的name,可以是字符串、数组、正则表达式,字符串可以用逗号隔开表示多个组件name;include会先匹配组件的name,如果name没有指定,那么匹配父组件中注册的名字(components中的名字)。实践中有个场景,左侧是导航栏,右侧是多个标签页,标签页都会渲染在同一个router-view中


Main.vue

//左侧导航栏 
<LeftNavMenu></LeftNavMenu> 
<keep-alive :include="includeArr"> 
	<router-view></router-view> 
</keep-alive> 
 
export default {
    
	data(){
    
		return {
    
		    //这个名字要与componentName1.vue中的name一致。 
			includeArr:["componentName1"] 
		} 
	} 
} 

componentName1.vue

export default{
    
	name:"componentName1" 
} 

缓存组件失效情况

App.vue

<template> 
  <div id="app"> 
    <router-view ></router-view> 
  </div> 
</template> 

Main.vue会渲染在App.vue中的router-view,componentName1.vue会渲染在Main.vue中的router-view中,如果还有componentName2.vue也渲染在Main.vue中,那么在从componentName1路由到componentName2时,componentName1会被缓存,componentName2路由到componentName1时,componentName2会被缓存。如果从componentName1路由到另外一个组件OtherComponent(渲染在App.vue中)时,componentName1不会被缓存,因为,缓存的视口不一样。


能不能缓存,可以通过vue tools查看,
在这里插入图片描述


发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue.js 路由参数传给组件详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。