Vue2.0 使用keep-alive引发的翻页bug

背景：由于浏览器回退会导致vue页面刷新。尤其是在遇到这种情况时，会引起不好的用户体验：

从可翻页的列表页进入详情页，通过浏览器回退会导致页面刷新，导致翻页page变为第一页。
首先介绍我使用的翻页方法，vue翻页插件：v-infinite-scroll

<div class="bottom_content">
        <no-data style="margin-top: 30%;" v-if="isShow"></no-data>
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          <li
            v-for="(item,index) in RecentBidList"
            :key="index"
            @click="linkTo('RecentBidDetail'),item"
          >
            <div class="title fz14 black1">{{item.title}}</div>
            <div class="info">
              <span class="blue">投资金额：
              {{item.first_moneys==''||item.first_moneys=='None'?'暂无':'￥'+item.first_moneys}}</span>
              <span class="gray">{{item.pubtime}}</span>
            </div>
          </li>
        </ul>
      </div>

注意：

其中infinite-scroll-disabled属性的值为false时，允许页面滚动；为ture时，页面禁止滚动。
<keep-alive>官方定义：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

出现bug：

当从列表页进入详情页的时候，会引起继续翻页的bug。

究其原因：

是使用了<keep-alive>组件，导致列表页没有被销毁，进入详情页面的时候依旧可以滚动。

解决方法：

注意这句话

“当组件在 `<keep-alive>` 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。”

我们在deactivated函数执行的时候（即进入详情页的时）设置loading为true，让页面禁止滚动；
activated函数执行的时候（即浏览器回退时）设置loading为false，让页面恢复可滚动状态。

  activated(){//activated时设置页面可滚动
     console.log("页面activated")
     this.loading = false
   },
  deactivated(){//deactivated时设置页面不可滚动
     console.log("页面deactivated")
     this.loading = true
  },