Vue之Element标签页保留用户操作缓存。

如何使用Keep-alive缓存组件。

<keep-alive> 
	   <router-view></router-view>
</keep-alive>

场景：切换标签页保存用户操作，关闭标签页清除缓存的操作。
思路：使用keep-alive缓存标签页，点击切换不刷新标签页，当关闭时清除缓存。

文章资料：
1.keep-alive实现原理。
2.使用 keep-alive 的 include 和 exclude无效的一点注意。

keep-alive的主要属性：

 	include: patternTypes, // 缓存白名单
    exclude: patternTypes, // 缓存黑名单
    max: [String, Number] // 缓存的组件

解决思路：使用keep-alive的include属性，打开的标签页放入白名单，关闭的标签页移除白名单。

1.在keep-alive中使用include添加白名单；

Home.vue

<template> 
	<!-- 省略 -->
	
	<!-- 缓存组件不刷新 -->
	<keep-alive :include="includeList"> 
	   <router-view></router-view>
	</keep-alive>
	
	<!-- 省略 -->
</template>
<script>
export default {
     
     
  name: 'Home',
  components: {
     
     
  },
  data(){
     
     
    return{
     
     
        includeList:[] //缓存白名单
    }
  },
 methods:{
     
     
 	
	//关闭标签页的事件
	//移除tab标签   
    tabRemove(targetName){
     
     
       console.log("tabRemove",targetName); //打印例子: /user
       // 省略
       // 在每个处理标签页事件 同步一下当前路由进缓存白名单
       this.updateIncludeList();
    },
    //更新缓存白名单 this.openTab是标签页存储的路由数组
    updateIncludeList(){
     
     
        var arr=[];
        for (var i = 0; i < this.openTab.length; i++) {
     
     
            var temp=this.openTab[i].route.replace("/","");
            console.log("temp:"+temp);
            arr.push(temp)  
        }
        this.includeList=arr;
    }
}
</script> 

2.其他页面处理如：User页面。

问题：Vue的Keep-alive属性 include 和 exclude无效！

办法：需user.vue组件页面中声明 name 属性。

<template>
     <!-- 省略 -->
</template>

<script>
export default {
     
     
	name: 'user',
}
</script>

<style> 
</style>

效果