VUE—用keep-alive进行缓存之后，返回到父级路由，再次进入时内容照样消失，怎么解决（图文）

最新推荐文章于 2023-03-22 14:09:11 发布
最新推荐文章于 2023-03-22 14:09:11 发布
阅读量1.2k 收藏
点赞数
分类专栏： VUE 文章标签： keep-alive缓存之后返回父级路由再次进入内容消失
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Poppy_LYT/article/details/99683995
版权

用keep-alive进行缓存之后，返回到父级路由，再次进入时内容照样消失，怎么解决

在这里插入图片描述
本身创建了四个工作台，用了keep-alive所以可以缓存，同级路由下进行切换内容不会消失，比如我点击切换到了我的文档这个路由，然后再点击我的工作台，会发现内容没有消失，但是我点击首页，也就回到了父级路由，再次进入我的工作台会发现内容消失了
在这里插入图片描述
解决方法如下：
首先我在我的工作台这个vue里定义了一个方法add（），在点击增加worklist数组的对象同时在localstorage本地存储this.worklist，然后看一下localstorage的变化
在这里插入图片描述
我创建了8个工作台，然后localstorage里存入arr
在这里插入图片描述
然后在我的工作台这个vue里写一个钩子函数created

created () {
        this.worklist = this.$local.get('arr').arrlist
      }

让页面渲染完成之后就取出储存在localstorage里的arr，并把值给到this。worklist
这样页面v-for循环的worklist就能直接出现了
这样不管怎么退出都不会消失了

Poppy_LYT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
05-06 1091
今天遇见一个问题，就是需要在多个tab页面之间切换的时候，需要保留之前tab页面的查询条件。例如：在前一个A页面输入了一些查询条件后，切换到另一个B页面时候，再次切换到A页面，发现A页面的查询条件会被重置，不会被缓存。 （1）问题描述 问题是这样的，我写了一个【A.vue】页面，在【activited()】钩子函数里面调用查询后端数据的方法，然后在后台系统里面切换路由页签的时候，返回到【A.vue】页面，发现每次切换回【A.vue】页面，这个页面之前的查询条件都会被重置，并且重新查询数据。 这里说的t
vue 使用keep-alive 三级以上的路由无法缓存解决方案
zhangjie9852的博客
08-19 4451
include ,包含页面组件name的这些组件页面，会被缓存起来 exclude 除了这些name以外的页面组件，会被缓存起来 还有第3种，如下这样写(即没有include或者exclude属性，表示所有的路由组件都会被缓存起来！！) <keep-alive> <router-view :key="key" /> </keep-alive> computed: { key() { return this.$route.path } } 注意 incl...
vue单页面跳页没有数据了_解决vue单页使用keep-alive页面返回不刷新的问题
weixin_39695672的博客
12-22 562
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方把这段代码改成如下：我们能看到这段代码做的逻辑判断，当路由的m...
利用keep-alive activated来解决页面返回后数据丢失的问题
dengye7077的博客
01-05 2106
keep-alive 可以缓存页面的数据，在页面回跳的时候不会更新数据 activated 在开启keep-alive时页面不会重新渲染 也不会进入生命周期 无法监听数据改变怎么办？使用activated来监听即可 this.$router.push({name:'test',query:{id:123}})跳转的时候会带参跳转，如果没有query后面的数据，那么跳转就不会带值 如果页面...
vue移动端使用路由跳转到新页面，返回后旧页面数据保持不变
qq_44731369的博客
05-09 6093
使用keep-alive 1、在项目的app…vue文件中添加keep-alive <template> <div id="app"> <!-- <router-view/> --> <!--缓存想要缓存的页面，实现后退不刷新--> <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面--> <keep-alive> <router-view v
Vue路由切换时新页面自动回到顶部
HaushoLin的博客
09-13 1309
打开路由router.js，将以下函数写入即可，全部所有组件在切换时都会滚动到顶部位置。
keep-alive不能缓存多层级路由菜单问题解决
11-21
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue keep-alive 动态删除组件缓存的例子
10-16
在页面切换时，被keep-alive包裹的组件会被缓存起来，再次切换回该组件时，可以快速渲染缓存的实例。 接下来，我们要讲解如何在Vue项目中动态地删除keep-alive缓存的组件。在实际开发中，我们常常会遇到这样的业务...
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
12-30
使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页...
vue页面的缓存问题解决（keep-alive + 页面级路由守卫 + 生命周期activated）共同解决
hjh15827475896的博客
01-18 2438
上面的问题出现之后， 我们分析一下其结果可以简化成我们想要的功能是这样的 列表页中的数据， 我希望， 如果是从详情页跳回来的时候就把页面内容给缓存下来，如果是从首页跳转过来的时候， 就要重新请求数据， 不要缓存 解决步骤 先把详情页跳转到列表页的问题给解决了 当我们从详情页跳回到列表页的时候， 总是给我们跳回到了分页的第一页， 这样的体验对用户来说肯定是不好的， 所以这个问题我们可以在 router-view 加上 keep-alive 这是我的真实项目中的代码， 其中 keep-alive :i.
keep-alive缓存问题解决方案
weixin_67642008的博客
10-20 2005
vue keepAlive组件
vue路由问题刷新之后保持原来路由
故事与我
10-21 2037
在 el-menu标签加 :default-active="'/' +this.$route.path.split('/')[1]"
keep-alive 缓存页面不生效的三种原因
热门推荐
weixin_49336005的博客
09-07 1万+
Keep-Alive不生效的三种原因及解决办法
vue使用keep-alive后从部分页面进入不缓存
hyduan_h5的博客
03-22 1346
需求：1：当前有页面A-B-C三个板块；2：从页面C返回页面B时，B页面数据之前数据不会被清空（keep-alive），且C页面携带到B页面的数据缓存(event-bus/vuex)；3：从A-页面进入B页面时，B页面为初始化状态。实现：1：借用路由钩子函数，在进入B页面时，对当前页面进行兼容处理；
vue前进刷新，后退不刷新
蛋蛋老公的博客
05-14 349
1、在app.vue界面设置keep-alive <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
keep-alive失效原因及解决方案
yougejing的博客
01-10 1万+
keep-alive失效原因及解决方案问题描述失效原因解决方案 问题描述 keep-alive结合路由使用，需要缓存的组件，在路由配置中的meta中添加keep-alive属性 侧边栏二级菜单列表页使用keep-alive缓存，列表页点击进入详情页，再返回列表页，列表页未缓存 失效原因 列表页和另外一个二级菜单列表页共用一个组件，共用方式是在路由配置时component直接指向共用组件listCommon.vue, Vue的就地复用策略导致组件不更新，为了解决切换菜单时listCommon组件更新的问题
从此告别表单数据丢失！vue教你缓存当前页面信息（keep-alive）
Shids_的博客
09-23 7259
从此告别表单数据丢失！vue教你缓存当前页面信息（keep-alive）
Vue ＜keep-alive＞踩坑与解决记录
japlus的博客
02-09 1536
使用vue的keep-alive 可以缓存加载的组件 keep-alive存在的问题 假设有下面若干tab [ tab1 tab2 tab3 ] 三个tab通过<keep-alive><router-view/></keep-alive>切换 若：tab1未加载完成时，切换tab2 则： tab1中的异步代码仍会继续执行，如果有获取dom元素的代码（包括this.$refs）则会获取不到。 由于keep-alive原因，vuex变量变化 ==&...
vue3keep-alive缓存路由
最新发布
09-01
Vue 3 中的 `keep-alive` 组件可以用来缓存路由组件，以便在组件切换时保留其状态。它可以帮助提升应用的性能和用户体验。 要在路由中使用 `keep-alive`，需要将其放置在需要缓存的组件的父级组件中。以下是一个简单的示例： ```vue <template> <div> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component"></component> </keep-alive> </router-view> </div> </template> ``` 在上面的示例中，`<router-view>` 组件用来展示当前路由的组件，而 `keep-alive` 则用来缓存这些组件。通过使用 `v-slot`，可以将当前路由对应的组件传递给 `keep-alive` 的子组件。 需要注意的是，被包裹在 `keep-alive` 内的组件会被缓存起来，并且在组件切换时不会被销毁和重新创建。因此，如果你需要在每次组件激活时执行一些操作，可以使用 `activated` 和 `deactivated` 生命周期钩子。 ```vue <script> export default { activated() { // 组件激活时触发 }, deactivated() { // 组件失活时触发 }, }; </script> ``` 通过以上步骤，你可以在 Vue 3 中使用 `keep-alive` 来缓存你的路由组件，并且在组件切换时保留其状态。希望能对你有所帮助！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值