vue中keep-alive缓存滚动条

最新推荐文章于 2025-06-09 10:03:40 发布

散修灬

最新推荐文章于 2025-06-09 10:03:40 发布

阅读量5.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue-router 文章标签： vue使用keep-alive实现滚动条缓存

本文链接：https://blog.youkuaiyun.com/weixin_44696379/article/details/94576636

前言
这几天公司在做一个app，需要嵌套H5页面，于是H5页面的编写就落到了本人的手里，啥都不说just do it 别逼逼！
项目过程中因为做的页面是列表页和详情页，为了接近原生和用户体验好，所以在列表和详情路由切换时候就要缓存列表页数据（路由跳转就是列表➡详情返回到➡列表），使用户体验更好
怎么实现
keep-alive

第一步，在路由元信息里配置需要缓存的页面，我用的keepAlive表示，名字随便起，只要和后面的一致即可

// 长期课程
  {
    path: '/perennialClass',
    name: 'perennialClass',
    component: resolve => require(['@/view/course/perennial-class'], resolve),
    meta: {
      title: "长期课程",
      keepAlive: true
    }
  },
  // 短期课程
  {
    path: '/shortPeriodClass',
    name: 'shortPeriodClass',
    component: resolve => require(['@/view/course/short-period-class'], resolve),
    meta: {
      title: "短期课程",
      keepAlive: true
    }
  },
  // 课程详情
  {
    path: '/courseDetails',
    name: 'courseDetails',
    component: resolve => require(['@/view/course/course-details'], resolve),
    meta: {
      title: "课程详情",
      keepAlive: false
    }
  },