vue可以通过元素包裹组件实现缓存，下次使用时不需要重新创建组件。但是有个问题：当keep-alive包裹的组件中有滚动元素时，keep-alive不会存储滚动位置。backingwithoutrefreshing的实现主要是基于keep-alive组件的activated和deactivated两个生命周期钩子函数。vuehook函数的执行顺序：不使用keep-alivebeforeRouteEnter-->created-->mounted-->destroyed使用keep-alive第一次进入页面，beforeRouteEnter-->created-->mounted-->activated-->deactivated再次进入缓存页面只会触发beforeRouteEnter-->activated-->deactivated。created和mounted将不再执行。其中activated是激活keep-alive组件时调用的。deactivated在keep-alive组件被停用时被调用。Demo实现了后退不刷新，返回时滚动到上次浏览的深度。在这个演示中，有三个链接导航。home-->pageA-->pageB-->pageC依次前进，每前进到一个新的页面，需要获取数据，按下返回键后，从pageC返回到pageB，pageB不再获取新的数据，但使用以前缓存的数据。从pageB返回到pageA时，pageA不再获取新的数据，而是使用之前的数据。而当pageA有滚动条时，返回时会滚动到上次浏览的高度。所以pageA和pageB需要缓存，pageC不需要缓存。//router.jsimportVuefrom'vue';importRouterfrom'vue-router';Vue.use(Router);constrouter=newRouter({mode:'hash',routes:[{path:'/',name:'home',component:()=>import('./views/Home.vue'),meta:{title:'首页',keepAlive:false//这些组件不需要被保存}},{path:'/pageA',name:'pageA',component:()=>import('./views/pageA.vue'),meta:{title:'pageA',keepAlive:true,isBack:false}},{path:'/pageB',name:'pageB',component:()=>import('./views/pageB.vue'),meta:{title:'pageB',keepAlive:true,isBack:false}},{path:'/pageC',name:'pageC',component:()=>import('./views/pageC.vue'),meta:{title:'pageC',keepAlive:false}}]});exportdefaultrouter;//pageA.vuepageA
