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'))
  },
    ```
相关推荐
iphone1081 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
老坛00119 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00120 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾23 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐27 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价28 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花29 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101329 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树30 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜31 分钟前
跨平台UI自动化-Appium
前端