nuxt 中使用 keep-alive

最新推荐文章于 2024-04-09 12:24:14 发布
最新推荐文章于 2024-04-09 12:24:14 发布
阅读量6.1k 收藏
点赞数
分类专栏： nuxt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supming1/article/details/100797348
版权

在nuxt中直接使用keep-alive组件没有效果，后面搜索到应该如下使用：

<Nuxt keep-alive/>

给keep-alive传递属性通过keepAliveProps完成，如下：

<nuxt keep-alive :keepAliveProps="{include:/list/i}"/>

不过keepAliveProps应该有bug，include传递了正则表达式，结果报如下错误：

 

文档地址：https://github.com/nuxt/nuxt.js/tree/dev/examples/with-keep-alive

 

supming1
关注
专栏目录
Nuxt.js - 根据条件，动态控制页面是否缓存（keep-alive-props）
王佳斌
08-30 3166
Nuxt.js - 根据条件动态控制页面缓存（keep-alive-props），nuxt.js 动态控制keep-alive缓存的页面，NUXT.js缓存怎么根据条件排除某个页面，nuxt.js 动态控制keep-alive的缓存策略，如何使用Nuxt.jskeep-alive-props道具从缓存中排除特定组件页面，vue.js 项目缓存页面如何解除，nuxt解决页面被缓存无法请求数据的问题，根据条件确定页面是否需要缓存，nuxt页面缓存后数据永远不请求了怎么办，将缓存页面清除掉。移动端带搜索条件的列表
Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前）
王佳斌
08-25 3373
Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），实现从详情返回列表,保持原先的滚动位置，vue使用keep-alive还原滚动位置的问题，nuxt.js项目页面缓存（keep-alive-props）回到指定滚动位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），vue项目中keep-alive的使用,从详情页返回列表时保存浏览位， vue实现返回记住滚动位置，
Nuxt使用Keep-alive缓存页面
hahahhahahahha123456的博客
12-11 3592
Nuxt 项目中，页面缓存的问题一直是比较头疼的一件事，几乎都是很粗暴的告诉你使用 keep-alive layouts 添加 keep-alive default.vue <template> <div> <nuxt :keep-alive="isKeepActive" :keep-alive-props="{ include: includeArr }" :class="applets === 4 ? 'isCarApp' : ''" /> .
【踩坑日记2】关于Nuxt3的keepalive无效
ming_situ的博客
08-22 1033
后来找了很久才发现我那个页面在 definePageMeta 中 使用了 layout:false，就是这个。这是官网的一个描述，就是在页面的 definePageMeta 中配置 KeepAlive:true。如果有跟我一样使用 keepalive 无效的同学可以参考一下，是不是也是这个原因。最近在使用 Nuxt3 开发遇到了 keepalive 无效的一个问题。先来看一下 keepalive 在 nuxt3 中是怎么使用的。导致我跳转至其他使用默认布局的页面，keepalive就失效了。
Nuxt3踩坑记 - 使用keep-alive
m0_64130892的博客
07-07 1852
Nuxt3的变化太频繁了，很多其他人写的文章都已经失效了。本文章写于2023.7.7，nuxt版本为3.0.0。比如我想让/search是KeepAlive的，那么就是 在/pages/search.vue中，加上这句代码。现在想要让某个页面是keep-alive的，只需要在那个页面中加一句这个代码就行
Vue keep-alive实践总结
weixin_34290631的博客
08-30 1439
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: inclu...
nuxt使用keep-alive
hello world
02-14 2068
业务场景： 列表页进入详情页返回，列表页数据缓存还是进入详情页之前的样子 仅有部分页面需要缓存，对需要缓存的页面进行操作 大致实现过程： 1.nuxt设置keep-alive，需要缓存的页面添加name属性 2.通过vuex管理需要缓存的页面/组件 3.需要缓存的页面在进入时判断是否刷新数据，离开进行判断是否需要缓存（滚动位置恢复看情况是否需要）. ...
在nuxt项目中使用keep-alive的两种可能方案
HermitSun的博客
05-16 5370
关于Vue中keep-alive的作用，以及在部分场景下由于避免重复请求、重复渲染的性能提升，想必大家都很清楚了，在此不再赘述。 但是在nuxt项目中使用keep-alive就有个问题，比如我有一个用到嵌套路由的页面，导航栏（或者标签页）由几个页面共享，然后根据路由切换页面内容。这应该是个很常见的场景，Vue的文档里keep-alive的部分用的也是这个例子。为了直观，放个图好了： 在这个场景下使用nuxt，虽然整个页面没有重复渲染（因为被keep-alive缓存了），但是每次都会触发asyncData这
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在<nuxt>区域显示一个页面内容怎么办？ 自己案例代码： pages/parent.vue 父组件的页面的内容 <!-- 进行切换...
NUXT 踩坑 —— nuxt 使用 keep-alive 和 keep-alive-props
张兴华的博客
07-08 4681
1、在标签上添加属性 <nuxt keep-alive :keep-alive-props="{ include: includeArr }" /> // js data () { return { includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组 } } 2、在组件中添加name属性 这个是好多网上教程没有点明的，这里重点提出。一定要在组件中加上对应的name export default { name: 'cardApplyQuery'
解决Vue中使用keepAlive不缓存问题
10-15
主要介绍了Vue中使用keepAlive不缓存问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
nuxt优雅的使用keep-alive
weixin_34167043的博客
06-11 5507
在做 nuxt 项目中，页面缓存的问题一直是比较头疼的一件事，这个问题我 google 好久也并没有收获，几乎都是很粗暴的告诉你使用 keep-alive，也不管相关的坑。 本篇将把我在nuxt中keep-alive的使用心得分享，希望可以帮助你更优雅的去处理页面缓存问题。 layouts 添加 keep-alive 首先建立nuxt项目 在./layouts/default.vue添加 ke...
Nuxt中keep-alive的使用
weixin_44769310的博客
04-12 587
layouts/default.vue <nuxt keep-alive :keep-alive-props="{include: includeArr }"/> <script> export default { data() { return { includeArr: [ 'ServicerManageProjects', 'DataReportData', ]
nuxt+vue3实现keep alive的方法，以及添加以后出现bug的解决方案
最新发布
weixin_46603570的博客
04-09 688
nuxt+vue3实现keep alive的方法，以及添加以后出现bug的解决方案
Nuxt.js中使用keep-alive进行页面缓存相关汇总
herman_student的博客
06-16 3046
前言：在Nuxt.js实际的项目开发过程中可能会遇到各种的使用需求场景，其中很多还是后台管理系统的会比较多，并且多数以分页表格的形式展示数据。主要解决从表格进入详情再返回表格当前数据不变化。 keep-alive的使用说明Nuxt.js的官方使用针对根目录的layouts文件下配置针对page下配置管理系统效果keep-alive使用无效的解决办法 Nuxt.js的官方使用 针对根目录的layouts文件下配置 <template> <div> <Nuxt keep
nuxt2：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态
snowball的博客
03-31 1347
思路：列表页点击查看增加缓存，实现从详情回到列表回到离开时的状态；点菜单清除缓存，实现展示新数据/初始化状态。 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存。include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存。include包含的 && 排除exclude包含的 就是需要缓存的组件。max：可传数字，限制缓存组件的最大数量,默认为10。一、keepalive简介。
03-vue中补充(渲染方式SSR与CSR,nuxt[简单说安装,路由,视图,异步数据,生命周期],vuex简单说,keepalive)
Tangoneone的博客
06-26 619
关于优化 01 - SPA 在 vue 这个阶段中我们所学的： 黑马面面项目 & 黑马头条项目。其实都是单页应用 全称：Single Page Application （单页面应用） 概念： 网站的效果都是显示在一个静态页面中的 在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改 在网站的源代码中是看不到任何数据（关键字）的 特点： 优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA
nuxt 中keep-alive的使用实例问题记录
Kratial的博客
11-08 784
nuxt 中缓存问题处理（keep-alive)
如何在Nuxt中使用keep-alive缓存组件
weixin_44423491的博客
11-23 885
在layout文件夹下的default.vue文件中写入： <Nuxt keep-alive :keep-alive-props="{ include:['componentName'] }"/> componentName为你组件的名称，然后在组件加上name：componentName就行了 export default(){ name:'componentName' } ...
nuxt-child特定页面去掉子导航
06-08
如果你想在Nuxt.js中的特定页面中去掉子导航，可以尝试使用`<nuxt-child>`组件的`keepAlive`属性。 首先，在你的父组件中，将`<nuxt-child>`组件包裹在一个`<keep-alive>`标签中，如下所示： ```html <template> <div> <nav> <!-- 父组件导航 --> </nav> <keep-alive> <nuxt-child :keep-alive="keepAlive"></nuxt-child> </keep-alive> </div> </template> <script> export default { data() { return { keepAlive: true } } } </script> ``` 然后，在你想要去掉子导航的特定页面中，将`keepAlive`属性设置为`false`，如下所示： ```html <template> <div> <!-- 特定页面内容 --> </div> </template> <script> export default { data() { return { keepAlive: false } } } </script> ``` 这样，当你进入特定页面时，`<nuxt-child>`组件将不会保持缓存，从而去掉子导航。而当你进入其他页面时，`<nuxt-child>`组件会保持缓存，从而显示子导航。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值