Vue利用keep-alive实现页面缓存

做列表缓存的时候，受益于@ vonvon_chris 这篇文章

原文链接https://blog.csdn.net/akony/article/details/79203745

实现了返回不刷新页面，当需要局部刷新的时候，使用activated的生命周期

activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在 。

 

使用中遇到的问题

1、因列表页滑动一定距离，进入详情页的时候，会造成详情页有移动距离，可能跟我的布局有关。

解决办法：

 mounted() {
    //此处必须写兼容模式，否则真机存在异常。
    if(document.body.scrollTop||document.documentElement.scrollTop){
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
          }
    

    //在mounted中获取参数时，为防止保错，我们应处理一下this.$route.query。
    let id = (this.$route.query || {}).id;
        .....do something
    }

2、若有需求在返回后，停留在以前的位置，需要设置 router为history模式并添加函数如下：

export default new Router({
	mode: 'history',
	scrollBehavior (to, from, savedPosition) {
		if (savedPosition) {
		    return savedPosition
	         }else {
		       if (from.meta.keepAlive) {
		   　　    from.meta.savedPosition = document.body.scrollTop;
		       }
		   return { x: 0, y: to.meta.savedPosition ||0}
	   }
   },
  	routes: [{
		path: '/home',
		name: 'home_index',
		component: home,
		meta: {
			keepAlive: true
		  }
	},]
})

3、缓存页分享：

在活动详情页请求完数据，可以初始化分享标题，图片和文案等，但是，用户返回的别的页面的时候，分享文案还在这个页面的

1、在没有缓存的时候，可以在beforeDestroy()生命周期，进行初始化通用分享。

2、在设有缓存的时候，需要在deactivated()生命周期（缓存不活动的状态），初始化通用分享。