nuxt2：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态

朴灿烈づ我的快乐病毒、 2024-03-24 12:38 15阅读 0赞

#### 一、keepalive简介 ####

[相关推荐：vue3-ts：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态][vue3-ts_keepalive]

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

keepalive组件总共有三个参数

include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存

exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存

max：可传数字，限制缓存组件的最大数量,默认为10

include包含的 && 排除exclude包含的 就是需要缓存的组件

#### 二、keepalive生命周期 ####

在Vue中，使用KeepAlive组件可以缓存组件的状态，以避免每次组件切换时都重新渲染，提高页面性能。它有一些特殊的生命周期钩子函数，用于维护缓存的组件：

1. activated：当使用<keep-alive>包裹的组件激活时调用，只有在缓存的组件首次被激活时才会被调用。

2. deactivated：当使用<keep-alive>包裹的组件失活时调用，只有在缓存的组件被移除时才会被调用。

#### **三、KeepAlive组件的生命周期函数执行顺序** ####

1. 第一次进入组件时，触发组件的created、mounted、activated钩子函数。

2. 当路由切换，进入缓存组件时，触发组件的activated钩子函数。

3. 当路由切换，离开缓存组件时，触发组件的deactivated钩子函数。

4. 当离开缓存组件时，组件的状态会被保存在缓存中，再次进入该组件时，不会再触发created、mounted钩子函数，而是直接触发activated钩子函数。

需要注意的是，使用<keep-alive>时，组件的销毁时机和生命周期函数的执行顺序也会受到影响。当组件被缓存时，它的销毁时机是不确定的，具体实现会根据缓存策略和内存占用情况来决定。因此，在使用KeepAlive组件时，需要注意组件的生命周期函数和业务逻辑是否受到影响。

#### 四、代码实现 ####

技术栈：nuxt2

思路：列表页点击查看增加缓存，实现从详情回到列表回到离开时的状态；点菜单清除缓存，实现展示新数据/初始化状态。

#### 4.1、store/index.js ####

store

keepIncludeArr: [],

mutations

setKeepIncludeArr(state, payload){
        state.keepIncludeArr = payload;
    }

#### 4.2、layouts/default.vue ####

nuxt标签增加keepalive相关配置

<nuxt keep-alive :keep-alive-props="{ include: keepIncludeArr }" />

computed引入vuex定义的state

computed: {
        ...mapState([
            'keepIncludeArr'
        ])
    }

#### 4.3、业务页面设置name ####

name: 'JurisdictionIndex',

#### 4.4、业务页面点查看增加缓存 ####

this.$store.commit('setKeepIncludeArr', ['JurisdictionIndex'])

#### 4.5、菜单文件menu.vue，点菜单清除缓存 ####

this.$store.commit('setKeepIncludeArr', [])

#### 4.6、回到列表页更新数据 ####

当在详情页编辑侯，回到列表页面需要更新数据，我们可以在 keepalive 的 activated 生命周期调用 获取列表页数据的方法，参数会保留当时的参数

activated () {
        this.getList()
    },

#### 4.7、经测试，满足使用 ####

#### 五、相关内容 ####

[vue3-ts：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态\_snow@li的博客-CSDN博客][vue3-ts_keepalive]

#### 六、欢迎交流指正，关注我，一起学习。 ####

[vue3-ts_keepalive]: https://blog.csdn.net/snowball_li/article/details/121673332

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 nuxt2：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态

一、keepalive简介 [相关推荐：vue3-ts：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态][vue3-ts_keepalive] <

朴灿烈づ我的快乐病毒、/ 2024年03月24日 12:38/ 0 赞/ 16 阅读

相关 SpringBoot--列表添加详情功能

功能介绍：点击table中的某一行数据，在下方以表单的形式将其具体数据列出来。 1、IDEA进行相关的配置，并且创建SpringBoot项目，目录如下： ![在这里插入

迈不过友情╰/ 2023年09月27日 08:54/ 0 赞/ 70 阅读

相关 vue之面包屑首页/列表页 /列表详情页

vue之面包屑首页/列表页 /列表详情页座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人 -------------------- 文章目

Bertha 。/ 2022年12月26日 08:21/ 0 赞/ 160 阅读

相关 vue学习经验总结（从详情页返回列表页时，保留列表页选中状态）

1.在app.vue页面中设置是否缓存 ![20201109144717949.png][] 2.在router路由里面，设置对应的列表页设置是否缓存，通过meta判断

约定不等于承诺〃/ 2022年12月20日 02:00/ 0 赞/ 239 阅读

相关 EasyAdmin 列表页某一列加链接跳到详情页

EasyAdmin 列表页某一列加链接跳到详情页，比如像下面的，在“姓名”列加链接跳到详情页 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sha

约定不等于承诺〃/ 2022年12月16日 06:09/ 0 赞/ 181 阅读

相关 mui获取php表格,如何优化mui列表跳转到详情页

因为列表页到详情页是多对一的形式，即列表页的多条数据列表对应的是一个详情页，只是数据不同而；因此，可以在加载列表页时预加载详情页，即创建一个详情页的webview,但是不显示出

拼搏现实的明天。/ 2022年10月21日 11:43/ 0 赞/ 203 阅读

相关 android带评论的详情页,DataTable从详情页带页数返回列表

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。在实际使用，有很多非常实用的功能，这里就介绍下，从详情页返

￡神魔★判官ぃ/ 2022年10月05日 12:46/ 0 赞/ 188 阅读

相关 Vue项目详情页 - 使用递归组件实现详情页列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

分手后的思念是犯贱/ 2022年04月13日 03:53/ 0 赞/ 503 阅读

相关 django使用vue-resource插件完成列表页与详情页

vue想要实现异步加载（局部刷新，不会刷新整个界面），需要使用到vue-resource库 vue数据模型定义：js vue本身不可以和ajax结合使用，vue不可以重复绑

深藏阁楼爱情的钟/ 2022年02月22日 19:08/ 0 赞/ 299 阅读

相关 VUE项目（单页面）问题之：从详情页返回列表页时返回到上次滚动位置，并还原列表页所有点击、搜索等状态

一、问题 > 新增需求，点击浏览器返回按钮或者详情页的返回按钮，需要返回列表页，并保存之前所有的状态。二、经过 > 刚开始，用 this.$route

妖狐艹你老母/ 2021年09月17日 02:20/ 0 赞/ 421 阅读