VUE缓存页面，通过keep-alive或变量的方式实现

VUE缓存页面，通过keep-alive或变量的方式实现

用例

当前有三个页面：检索页、详情页与其他
页面结构如图：

左侧导航有筛选页和其他两个页面，筛选页筛选后内含详情页可跳转，通过详情页可返回至筛选页，或通过切换左侧导航标签，进入筛选页或详情页。

需求：点击筛选页进入筛选页，进入详情页时保留筛选数据，从详情页返回时离开时的筛选数据仍渲染在页面上。而从其他入口切换至筛选页则不保留筛选数据。

实现方式

1.keep-alive
2. keep-alive结合meta实现
3.通过变量控制

keep-alive

首先，我们从简单的需求说起，即无论从哪个页面切入都需缓存筛选页。
那么此时使用keep-alive是比较合适的。
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。

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

当组件被包裹在keep-alive中时，组件的状态会被保留。除了保留筛选数据可以用到，还可以保留浏览位置等。但是需要注意的是：keep-alive会把所有加载过的界面都缓存起来，在返回时无法将界面销毁掉，导致再进入时没有重新加载这个界面。可以在点击返回按钮的时候（使用beforeRouteLeave）调用this.$destroy(true)将界面销毁。

keep-alive与meta

通过meta设置变量分情况缓存页面。
1.在路由中配置meta：

{
	path: '/test/filter',
	name: 'filter',
	component: filter,
	meta: {
		keepAlive: true    //此组件需要缓存
	}，
	path: '/test/other,
	name: 'other',
	component: other,
	meta: {
		keepAlive: false    //此组件不需要缓存
	}，
	path: '/test/detail,
	name: 'detail',
	component: detail,
	meta: {
		keepAlive: false    //此组件不需要缓存
	}
}

2.分情况包裹keep-alive

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

3.在筛选页通过beforeRouteEnter

  beforeRouteLeave (to, from, next) {
    if (to.name === detail' && from.name === 'filter') {
      from.meta.keepAlive = true
    } else if (to.name !== detail' && from.name === 'filter') {
      from.meta.keepAlive = false
    }
    next()
  }

通过变量控制

思路是，设置一个初始值为false的变量（本例中为clear），在组件中通过watch监听clear的变化，当clear为true时，清除缓存。

<script>
	export default{
		data(){
			return{
				clear: false
			}
		}，
		beforeRouteLeave (to, from, next) {
			if(to.name !== 'detail') {
				this.clear = true
				setTimeout(()=>{
					this.clear = false
				})
			}else{
				this.clear = false
			}
			next()    // 不要忘记写next（）
		},
		watch: {
			clear(newVal, oldVal){
				if(newVal){
					// to do 清除缓存数据
				}
			}
		},
	}
</script>