vue2+keep-alive h5端 从首页进入客户列表-客户列表更新,从客户列表进入客户详情再返回,客户列表需要缓存筛选条件以及滚动位置

确保 路由层级是2级

在app.vue 添加如下代码

js 复制代码
<keep-alive :include="include">
      <!--带 keepAlive 的标识页面进行缓存 从详情列表再进来会更新或者自己手动更新-->
     <router-view v-if="$route.meta.keepAlive "></router-view>
 </keep-alive>

<router-view v-if="!$route.meta.keepAlive "/>

include: []


watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      //如果 要 form(离开) 的页面是 keepAlive缓存的,
      //再根据 deepth 来判断是前进还是后退
      //如果是后退
     
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    }
  },

路由设置 要点
+ 需要缓存的地方添加 keepAlive:true , deepth: 1
+ 从列表回到首页的时候 需要列表设置deepth: 1 首页设置deepth 0.5 ,确保列表大于首页

对应二级路由写法

js 复制代码
{
    path: '/businessChance/list',
    name: 'businessChanceList',
    component: resolve => require(['@qwH5Views/businessChance/page/index.vue'], resolve),
    meta: { hideFoot: true, title: '商机管理', code: '51100001', keepAlive:true , deepth: 1  }
},
{
   path: '/business/createbusiness',
   name: 'createBusiness',
   component: resolve => require(['@qwH5Views/business/page/createBusiness.vue'], resolve),
   meta: { hideFoot: true, title: '新建商机', }
 },

{
    path: '/home/index',
    name: 'homeIndex',
    meta: { title: '首页' ,deepth: 0.1},
    component: resolve => require(['@qwH5Views/home/page/newHome/index.vue'], resolve)
  },

记住 路由里面设置的name 跟 自己页面里面name 要对应

恢复滚动条方法

js 复制代码
 @scroll="handleScrollList"
 
 handleScrollList(){
      // 当前页面滚动位置
      sessionStorage.setItem('loadContPage', this.$refs.loadContPage.scrollTop)
    },

async activated() {
    console.log('子组件的activated');  
    // 让滚动条复原
    this.$refs.loadContPage.scrollTo(0, sessionStorage.getItem('loadContPage'))
  },
    ```
相关推荐
上单带刀不带妹2 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军23 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW38 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵2 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端