keep-alive 用法

需求
首页 列表页 详情页
首页进入列表页 列表页进入详情页
详情页返回列表页 滚动条在相应位置
列表页返回首页 首页进入列表页 在最上面

第一步 在app中设置需要缓存的div

//缓存的页面
<keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

//不缓存的页面
<router-view v-if="!$route.meta.keepAlive"></router-view>

第二步 在路由router.js中设置.vue页面是否需要缓存

{
      path: '/firstPage',
      name: 'firstPage',
      component: firstPage,
      meta: {
        isBack: false // 用于判断上一个页面是哪个
      }
},
{
      path: '/list',
      name: 'list',
      component: list,
      meta: {
        keepAlive: true, // 此组件需要被缓存
        isBack:false // 用于判断上一个页面是哪个
      }
},
{
      path: '/detail',
      name: 'detail',
      component: detail,
      meta: {
        isBack:false // 用于判断上一个页面是哪个
      }
}

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。

当再次进入（前进或者后退）时，只触发activated。

第三步 list.vue

beforeRouteEnter(to, from, next) {
      if (from.name === 'detail') {
        to.meta.isBack = true
      }
      next()
},
// 初始化时执行
activated() {
	// 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
	if (!this.$route.meta.isBack) {
		scrollTop 为0
	} else {
		scrollTop 为200
	}
	// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
    this.$route.meta.isBack = false
    
},
// 页面离开时执行
deactivated() {
	// 页面离开时获取距离 例 200
}