• 详情页返回列表页,列表状态缓存


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

    参考地址:

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

    原代码:

    <keep-alive v-if="$route.meta.keepAlive">

            <router-view>

         

         

    引用原因分析:

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

    修改后:

            keepAlive">

         

         

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

    参考地址:

    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

      })

  • 相关阅读:
    K近邻模型
    python安装.whl文件
    唐诗的四个阶段
    中英文互译在线翻译
    一个重要的问题:怎么寻找自己的终身事业呢?
    【JavaSE】TreeSet与TreeMap源码解读
    【计算机视觉|人脸建模】学习从4D扫描中获取的面部形状和表情的模型
    五分钟k8s入门到实战-应用配置
    用户登录问题——登录态
    git上传对象文件错误解决方案
  • 原文地址:https://blog.csdn.net/u010289111/article/details/127848851