30.vue keep-alive，transition，路由

在使用history.back(),这种返回的界面，再次进入的时候声明周期函数都会重新调用

history.go(),
history.back(),//后退一页
history.forward()//前进一页
window.history.go(-1)；//后退一页
window.history.go(-n)；//后退n页
window.history.go(1)；//前进一页
window.history.go(n)；//前进n页
window.history.go(0);//刷新页面

但是通过this.$router.push 的方式再次进入的界面如果界面内容没有任何改变的话，不会再次调用下面的生命周期函数

beforeCreate（创建前）
created（创建后）
beforeMount（载入前）
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

1.当项目中使用了keep-alive之后，mounted，destroyed函数将不会被调用，反之会调用activated和deactivated函数。
2.keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
3.在没有使用keep-alive的项目中，通过history.back()这种方式返回的界面重新进入时相当于是一个全新的界面进入。
4.router-view代表的内容是router设置的路径下对应的界面。
5.当使用嵌套路由的时候，keep-alive函数只对最外层的路由函数起作用，而对于内部的子路由无法实现页面的缓存，这时可以通过2层keep-alive实现子路由的缓存。

就是在子路由的入口那里在添加一层keep-alive

1. 不要使用两个transition包裹，会导致缓存界面到非缓存界面，动画出错
2. 不要使用route.meta.keepAlive的方式会导致当页面缓存为true到false的界面，会自动调用true界面的destory，然后当false界面回到true界面的时候，按照全新的界面即调用mounted又调用activated，导致出错
3. 正常的情况应该是无论怎样跳转，除了第一次，不会在调用mounted，而是调用activated
4. add, delete, release代表路由中name对应的名字

    <transition :name="transitionName">
      <keep-alive exclude="add, delete, release">
        <router-view class="child-view"></router-view>
      </keep-alive>
       <!-- <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view> -->
    </transition>