vue 使用 keepAlive 坑

1. transition和keep-alive一起使用的时候要将transition作为keep-alive的父容器，否则keep-alive的效果出不来

2. 将需要缓存的页面在路由配置的meta中写上keepAlive: true,不需要缓存的就不用写

3. 有的页面需要缓存，有的页面不需要缓存，所以需要做判断。需要使用第二种方法，因为第一种方法在第一次进入页面的时候keep-alive的效果不会出现，第二种方法可以解决。（这个判断是在要缓存的页面做的）

4. 不要页面缓存的地方主要就是动态的去改变路由中的配置

5. 在后退之后不会触发beforeRouteLeave，所以导致缓存之后切换其他的页面，再切换回来缓存的还是之前的页面

    vue-router路由控制是基于h5的history API实现的。

    beforeRouteLeave是基于window.onpopstate   

    该事件仅在按了浏览器按钮或者调用history.back()方法时生效，且在同一document的两条历史记录条目间的导航才会生          效，而在后退之后不会触发beforeRouteLeave的原因正是不属于同一document。

    原文：Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is      only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the      event is only triggered when the user navigates between two history entries for the same document.

    上文加下划线解释：如果您直接打开链接并单击“/ foo”，则会有两条历史记录：/和/ foo（当前）。

    单击后退按钮时，浏览器会将历史记录更改为/，并且在路由尝试修复之前，浏览器历史记录将变为/ foo（当前）和/ foo。

    第一次进入页面的生命周期：beforeRouterEnter ->created->…->activated->…->deactivated

    缓存之后的声明周期：beforeRouterEnter ->activated->deactivated

    解决办法：

beforeRouteEnter(to, from, next) {
      next(vm => { // 这个时候组件还没有创建，所以要通过vm来访问
            if (from.fullPath == '/A' && to.fullPath == '/B') { //只有是从A进到B页面才执行
                // 将要执行的逻辑
            }
      })
}

借鉴大佬文章：

https://github.com/vuejs/vue-router/issues/887

https://www.jianshu.com/p/d08b6aefab41

http://www.hongweipeng.com/index.php/archives/1429/?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com