Vuecli中keep-alive缓存组件的用法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

算了，不复制了，自己查官网API：https://cn.vuejs.org/v2/api/#keep-alive

需要缓存的A组件

beforeRouteEnter(to, from, next){
  to.meta.keepAlive = true;
  next();
}

上一级组件或者不需要A组件再进行缓存的时候

beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false;
  next();
}

当目标组件跳转到 selectProject 组件的时候不需要缓存，跳转到其他组件需要缓存

beforeRouteLeave(to, from, next){
    if(to.name == "selectProject"){
	from.meta.keepAlive = false;
    }else{
    	from.meta.keepAlive = true;
    }
    next();
}

App.vue中由于用到了过渡

<template>
	<div id="app">
		<transition>
			<keep-alive>
				<router-view v-if="$route.meta.keepAlive"></router-view>
			</keep-alive>
		</transition>
		<transition :name="$store.state.anistates">
			<router-view v-if="!$route.meta.keepAlive"></router-view>
		</transition>
	</div>
</template>

如果没有过渡的话

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

配置路由的时候

import defect from '@/pages/defect'
export default new Router({
  routes: [
    {
      path: '/defect',
      name: 'defect',
      component: defect,
      meta: {
        keepAlive: true // 此组件需要被缓存
      }
    }
  ]
})

参考文档

vue2.0 keep-alive最佳实践
Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()函数