详情页返回列表页，列表状态缓存

移动端的时候从企业列表页面点击到企业详情页面的时候，因为列表数据项非常多。需要我们缓存页面的状态且回复到原来滚动条的位置。

参考地址：

vue keep-alive 缓存 不生效解决方案_娃哈哈_的博客-CSDN博客_keepalive不起作用

原代码：

       

     

     

引用原因分析：

通过v-if来判断是否生成keep-alive，当列表页面A符合条件时，内存缓存了组件状态。当跳转到详情页B时，不符合条件，由于v-if是挂载到keep-alive标签上，会把之前keep-alive的列表页面A进行销毁，再次进入到A会重新创建。

修改后：

       

     

     

可以实现缓存页面的状态了，但是发现回到了列表页面以后滚动条回到了顶部的位置，列表项数据很多，我们不太容易方便找到原来的列表项信息。因而我们还需要处理当从详情页返回到列表页时滚动条继续在原来的位置。

参考地址：

vue-router中scrollBehavior的妙用--使用keep-alive标签后返回页面指定位置_aliven1的博客-CSDN博客

const createRouter = () =>

  new Router({

    // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath

    // base: process.env.BASE_URL,

    /**  为什么不能直接return而必须使用异步滚动操作呢

     *   必须使用异步滚动，利用setTimeout跳出主线程将回调事件放到队列中。由于mouted比scrollBehavior函数早执行，所以异步请求的回调事件优先进入队列，接下去才是setTimeout的回调事件。根据队列

         先进先出的原理。先执行了异步请求回调事件对data中的变量a做赋值操作。此时相当于这已经是个静态页面了,接着我只要执行return {

         x:0, y: 100}。这样就已经触发了页面滚动到100px的效果。但是由于data数据发生改变，页面重新渲染又回到顶部。这时整个轻触滚动效果已经暗中执行完成，不会再出现遮罩层了。

     */

    scrollBehavior(to, from, savedPosition) {

      // keep-alive 返回缓存页面后记录浏览位置

      if (savedPosition && to.meta.keepAlive) {

        return savedPosition

      }

      // 异步滚动操作

      return new Promise(resolve => {

        setTimeout(() => {

          resolve({ x: 0, y: 1 })

        }, 0)

      })

    },

    // scrollBehavior: () => ({ y: 0 }),

    routes: constantRouterMap

  })