vue单页设置页面不刷新记录滚动条的位置

原创

已于 2022-09-28 11:09:27 修改 · 1.5k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2020-11-25 14:41:44 首次发布

博客围绕商城页面返回功能需求展开，点击三级分类节点进入商品列表页，返回时需回到当前三级分类节点。介绍了Vue单页使用keep-alive实现页面返回不刷新的两种方法，包括设置页面缓存、记录滚动条位置等，还提及不同场景下的设置差异。

功能需求

点击商城第三级分类节点进入商品列表页，然后点返回按钮时页面重新回到了第一个一级分类节点的三级节点下。但需要的效果是返回到当前的三级分类节点（页面在底部）。

vue单页使用keep-alive页面返回不刷新

法1：设置所有页面进入分类页时都缓存（已试过成功）

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

1.在配置router的文件中设置分类页的keepAlive为true

在这里插入图片描述

2.将app.vue文件设置为

<template>
  <div id="app" class="tap-highlight">
    <!-- 可以被缓存的视图组件 -->
    <kkeep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不需要被缓存的试图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
};
</script>

这样分类页在首次加载缓存后再进入就不会重复刷新获取数据

3.在分类页的vue文件中