vue页面利用＜keep-alive＞＜/keep-alive＞进行缓存，详情页面返回缓存

vue页面进行缓存
问题： 一共是三个页面 ，、列表页A（固定参数）、列表内容页B（列表id）、内容详情页C (内容id) A-B-C可以正常进行， C-B id参数不知道怎么传，于是利用了 对B页面进行缓存。

解：1、 定义要缓存的组件 在router.js中对组件进行添加
meta: {
keepAlive: true, //是否被缓存
isUseCache: false, //是否进行刷新 （判读是否要缓存）
}
2、在根组件中对要缓存的组件进行 包裹

	<keep-alive>
		         <router-view v-if="$route.meta.keepAlive">
		        		  <!-- 这里是会被缓存的视图组件，比如 page1-->
		       	 </router-view>
    		</keep-alive>
  	 		 <router-view v-if="!$route.meta.keepAlive">
   			 <!-- 这里是不被缓存的视图组件，比如,page2 , page3 -->
    </keep-alive>

3、在要缓存的页面B写上activated 监听该页面是否要进行刷新

 activated() {
		    if(!this.$route.meta.isUseCache){  //isUseCache 时添加中router中的元信息，判读是否要缓存
		      this.dataList = [];
		      this.fromData.situationId = this.$route.params.situationId; 
		      this.getList();
		    }
		  },

4、在C页面 (为了回到C页面不执行B页面的activated() 从而行缓存)

	beforeRouteLeave(to, from, next){
	    // 列表页面跳转到 详情页时，设置需要缓存
	    if(to.name=='myWorkQkhzCksb'){
	      to.meta.isUseCache = true
	    }
	    next()
	  },

5、在A页面(为了A页面到B页面的 执行activated() 不进行缓存)

beforeRouteLeave(to, from, next){
	    // 列表页面跳转到 详情页时，设置需要缓存
	    if(to.name=='myWorkQkhzCksb'){
	      to.meta.isUseCache = false
	    }
	    next()
	  },

总结可能可以描述，表达方式不太准确，纯记录这个新功能 路由太深的东西还不太明白 继续学习