vue组件 keep-alive 和 transition 使用详解

// 组件

export default {
 name: 'test-keep-alive',
 data () {
  return {
    includedComponents: "test-keep-alive"     //这句不能漏掉
  }
 }
}

<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b"> 
<!-- 将缓存name为a或者b的组件，结合动态组件使用 --> 
　　<component :is="view"></component> 
</keep-alive> 
<!-- 使用正则表达式，需使用v-bind --> 
<keep-alive :include="/a|b/"> 
　　<component :is="view"></component> 
</keep-alive>

//需要缓存时
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要缓存时
<router-view v-if="!$route.meta.keepAlive"></router-view>
//两组同时启用，只要在路由meta元信息中 对keepAlive定义，就能自主控制是否需要缓存

//...router.js
export default new Router({
 routes: [
  {
   path: '/',
   name: 'Hello',
   component: Hello,
   meta: {
    keepAlive: false // 不需要缓存
   }
  },
  {
   path: '/page1',
   name: 'Page1',
   component: Page1,
   meta: {
    keepAlive: true // 需要被缓存
   }
  }
 ]
})

<div>
 <button @click="show=!show">show</button>
 <transition name="fade">
  <p v-show="show">hello</p>
 </transition>
</div>

&.fade-enter-active, &.fade-leave-active
 transition: all 0.5s ease   
&.fade-enter, &.fade-leave-active
 opacity: 0