Vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存

场景：为了优化用户体验，当从商品详情页返回到商品列表页时，不需要再次请求商品列表数据。由此，我想到了使用Vue中的keep-alive，但常规keep-alive的使用方法仅满足任何条件下都缓存单个页面。

但在实际过程中，我们从其他页面（如商品分类页）进入商品列表页时，应当是请求商品列表的数据，不再缓存该页面。这里，如果使用keep-alive的常规方法则无法满足需求，所以有了以下的解决方案。

1. 配置路由出口渲染组件

在App.vue文件进行以下配置

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

<keep-alive>

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

</keep-alive>

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

2. 在路由选项中，配置`meta`属性和`isBack`标识

在路由文件中，配置meta属性keepAlive为true时，表示缓存该页面；同时，配置isBack标识，进行判断是否从详情页返回该页面。

{
    path: '/goodsList',
    name: 'GoodsList',
    component: require('@/page/index/goods/GoodsList'),
    meta: {
        keepAlive: true,
        isBack: false
    }
},

{

path: '/goodsList',

name: 'GoodsList',

component: require('@/page/index/goods/GoodsList'),

meta: {

keepAlive: true,

isBack: false

}

3. 在缓存的Vue文件中做判断

在需要缓存的列表文件中（如GoodsList.vue），进行以下配置

3.1 判断需要缓存的页面

通过beforeRouteEnter(to, from, next)，来判断路由是从哪里来跳转的，如果是从详情页跳转的，则将当前路由对象的meta.isBack设置为true，否则设为false。

beforeRouteEnter(to, from, next) {
    if (from.path == "/goodsDetail") {
        to.meta.isBack = true;
    } else {
        to.meta.isBack = false;
    }
    next();
},

beforeRouteEnter(to, from, next) {

if (from.path == "/goodsDetail") {

to.meta.isBack = true;

} else {

to.meta.isBack = false;

}

next();

3.2 不缓存页面，重新请求数据

其他页面进入缓存页面时，应重新请求数据，所以需要在页面加载之前（即activated），将之前获取到的数据以及查询条件清空。

activated() {
    let that = this;
    // 第一次和非详情页进入页面时 isBack都为false，即需要重新请求数据
    if (!this.route.meta.isBack) {
        // 清空查询条件和数据 并重新请求数据
        that.goods = [];
        that.params.p = 1;
        that.getGoodsList()
    }
    this.route.meta.isBack = false;
},

activated() {

let that = this;

// 第一次和非详情页进入页面时 isBack都为false，即需要重新请求数据

if (!this.route.meta.isBack) {

// 清空查询条件和数据并重新请求数据

that.goods = [];

that.params.p = 1;

that.getGoodsList()

}

this.route.meta.isBack = false;

相关问题：

使用keep-alive缓存时，会出现无法缓存滚动条高度的情况，这里需要在activated中定义滚动条的高度。具体做法如下：（返回记住滚动条的位置）

// data中定义
homeTop : 0,

// activated中设置高度
document.getElementById('app').scrollTop = this.homeTop || 0

// 还有第三步,仍然有点问题,我未使用到第三步,就已经达到想要的效果了

// data中定义

homeTop : 0,

// activated中设置高度

document.getElementById('app').scrollTop = this.homeTop || 0

// 还有第三步,仍然有点问题,我未使用到第三步,就已经达到想要的效果了

文档：https://www.cnblogs.com/_error/p/10118257.html

参考资料

https://segmentfault.com/a/1190000017456786?utm_source=tag-newest

https://yq.aliyun.com/articles/608977

这些信息可能会帮助到你：外卖返钱 | 捐赠我们

原创文章，作者：宋小羽，如若转载，请注明出处：https://bysjb.cn/vue-keep-alive.html

Vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存

1. 配置路由出口渲染组件

2. 在路由选项中，配置meta属性和isBack标识

3. 在缓存的Vue文件中做判断

3.1 判断需要缓存的页面

3.2 不缓存页面，重新请求数据

参考资料

相关推荐

Vue2框架学习一：基础语法

Vue2框架学习二：组件基础

vue实现加入购物车的小球落入动画效果

element实现树形选择器，支持多选、回显正常显示

发表回复

2. 在路由选项中，配置`meta`属性和`isBack`标识