[Vue]使用keep-alive第一次失效，第二次进入才正常

最新推荐文章于 2024-05-29 09:57:39 发布
最新推荐文章于 2024-05-29 09:57:39 发布
阅读量3.1k 收藏 7
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44099060/article/details/122300930
版权

要求从home返回到summary时候，summary不刷新，其余的页面跳转仍然保持刷新

最开始使用路由护卫（BeforeRouteLeave和beforeLeave）以及在页面路由中设置meta下keepAlive参数来控制keep-alive组件的显示。

但是在第一次进入的时候页面仍然刷新，第二次今进入才会生效，找了半天为什么这样，索性把这些都拆了，直接使用监听，在根页面按照路由跳转的to和from来判断是否需要keep-alive生效。

直接在app.vue路由监听就行
在这里插入图片描述
代码提交后想到，为了节省资源其实可以再keep-alive上加一个include=’summary‘的，下次有需求了再改吧

kkkkkkkkira
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用keepalive缓存页面三个页面之间跳转第一次不生效
FangFang's Blog
01-18 2276
经排查发现，是因为我跳转的路由中有中文，keepalive第一次缓存的是正常的带中文的路由，当返回的时候中文变成了乱码，keepalive中没有缓存这个乱码的路由，所以第一次返回的时候页面缓存没生效，第二次正常中文和中文乱码路由都被缓存了，这个时候页面缓存就正常了。里打印会发现，缓存的页面多了一个乱码的，这其实就是原来的B页面，就是因为这个页面B，中文和中文乱码的才被缓存下来，所以第二次再返回的时候B页面才不会再进入到created生命周期。生命周期，也就是B页面没被缓存，// 注意这里路由后面的中文。
vue keep-alive第一次无效问题以及解决办法
li222248的博客
06-09 4640
使用keep-alive场景：列表页 -> 详情页 ->列表页（使用keep-alive缓存列表页） 方法一：这种方法不管从哪个页面返回到list页面，list页面都不刷新，不建议使用 <!-- 注：list是组件名 --> <keep-alive include="list"> <router-view /> </keep-alive> <!-- 注：在所需缓存的页面定义组件名 --&gt
vue使用keep-alive不生效解决方案
最新发布
qq_26311665的博客
05-29 494
vue使用keep-alive不生效解决方案
vue——keepAlive第一次无效问题及解决方法
wangchaoqi1985的博客
01-24 1501
vue——keepAlive第一次无效问题及解决方法
vue做面包屑使用keep-alive缓存页面数据，解决第一次缓存不生效问题
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
04-27 1752
注意：keep-alive 一定要放在变化的模块化里面app.vue里面有一个router-view 在哪里放keep-alive没有效果因为我在home里面写的模块化 所以要在home页面里面使用keep-alive进行缓存核心代码：route页面上面的name和path和meta下面meta的name和path必须相同。
vue动态keep-alive无法触发activated钩子函数问题
chendong0008的博客
09-06 3617
vue动态keep-alive缓存用户页面是根据进入的时候把需要缓存的页面的name先放到vuex中的state，然后再离开页面路由离开的时候去清楚这个vuex的state页面的name进行清除操作，下次再进去需要缓存的话就重新把页面name放到vuex中即可实现动态缓存页面。 坑1： 需要先把需要的缓存页面name设置到vuex的state中，否贼会进入这个页面的时候不会触发actived方法，导致界面出现错误（页面上的所有方法和值都有错误，值无法更新问题） 坑2： 最好每个页面的name都写上，否贼
vue3 使用router4 keepalive问题
程序员小曲的博客
08-30 2394
项目从vue2升级到vue3，路由也紧跟着升级到了4，然后在使用keep-alive的时候一直不生效，就去查文档 vue2.x与vue3.0的App.vue配置有差异，在App.vue配置信息如下： vue2.x中，router-view可整个放入keepalive中，如下： <template> <!-- vue2.x配置 --> <keep-alive> <router-view v-if="$route.meta.keepAlive" /&gt
解决vue keep-alive 数据更新的问题
12-01
在Vue.js应用中，`<keep-alive>`组件是一个非常有用的特性，它允许我们缓存组件的状态，使得在切换路由时能快速恢复之前的状态，从而提高用户体验。然而，在实际使用中，`<keep-alive>`可能会引发一些数据更新的问题...
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用<keep>解决这个问题，下面是我的使用心得。 <keep>...
keep-alive不能缓存多层级路由菜单问题解决
11-21
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...
vue-element-admin 菜单标签失效的解决方式
10-16
通过这种方式，每个子路由都有其独特的`name`，这样在使用`<keep-alive>`时，Vue Router就能正确地管理和缓存各个组件，保证菜单标签的正常显示和选中状态。 另外，确保`<keep-alive>`组件的正确使用也是关键。`...
Vue子组件中渲染动态组件无效（第一次无效、第二次有效）
Alecor的博客
07-27 6449
问题分析 今天在写代码的时候，用到了 Vue框架的动态组件，本来用的好好的（具体用法参考官方文档），后来改进了一下业务功能，在子组建中也使用了和父组件相同的动态组件方法，由于子组件采用对话框i的形式，但是子组件中的动态组件却没有加载出来；准确来说是 第一次没有加载出来，返回上一级界面，重新进入组件，在打开对话框子组件有加载出来了 引入Vue 和 ElementUI parent.vue &...
keep-alive失效原因及解决方案
yougejing的博客
01-10 1万+
keep-alive失效原因及解决方案问题描述失效原因解决方案 问题描述 keep-alive结合路由使用，需要缓存的组件，在路由配置中的meta中添加keep-alive属性 侧边栏二级菜单列表页使用keep-alive缓存，列表页点击进入详情页，再返回列表页，列表页未缓存 失效原因 列表页和另外一个二级菜单列表页共用一个组件，共用方式是在路由配置时component直接指向共用组件listCommon.vue, Vue的就地复用策略导致组件不更新，为了解决切换菜单时listCommon组件更新的问题
vue keep-alive缓存后再次打开页面不刷新问题处理方案
昨天1990的专栏
12-21 1305
1创建一个js文件 import { mapGetters } from "vuex"; export default function () { return { computed: mapGetters(['keepAliveList']), activated() { let that = this; let refresh = true; this.keepAliveList.ma...
vue路由守卫beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave不生效
xiaoxiannvh的博客
04-11 3855
vue2 路由守卫钩子函数在组件中不生效
关于keep-alive的第一次不缓存
weixin_45406198的博客
06-15 1347
一直使用keepalive进行缓存，最近出现一个问题，发现在beforeRouteLeave里对meta里的keepalive进行设置false和true的时候，第一次返回到 使用了keepalive的页面时，页面没有缓存而是重新刷新了，第二次进入的时候才进行了缓存，找了很多的方法尝试都没有效果，最后发现，只要在router.js里设置keepAlive为true，离开或者进入到页面的时候不要对keepAlive再次进行修改就不会出现第一次不缓存的情况，但是同时出现了页面一直在第一次缓存的状态里，所以在离开
vue项目第一次打开页面，第一次不能登录，第二次以后正常的问题（阻止事件默认行为、冒泡、捕获）
qq_33911541的博客
11-15 1285
vue项目第一次打开页面，第一次不能登录，第二次以后正常的问题（阻止事件默认行为、冒泡、捕获）
vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题
abcd123596的博客
08-31 6623
keep-alive
beforeRouteLeave在子组件中没有生效
热门推荐
Liu_Jun_Tao的博客
04-10 1万+
考虑这么一种情况，在页面中存在父子组件，当需要离开当前页面时，要触发某个子组件中的事件。 这里尝试了两种方式： 1.添加路由守卫 在子组件的.vue文件中，使用beforeRouteLeave钩子，然而并没有触发。debug测试发现，在父组件中添加的beforeRouteLeave可以触发。 2.使用beforeDestory钩子 子组件使用beforeDestory钩子，当离开页面时，...
vue keep-alive第一次无效
04-05
可能是因为没有给`keep-alive`组件设置`include`和`exclude`属性，导致第一次渲染时不会被缓存。可以尝试给`keep-alive`组件设置`include`和`exclude`属性，如下： ```html <keep-alive :include="[component1, component2]" :exclude="[component3]"> <router-view></router-view> </keep-alive> ``` 其中，`include`属性指定要缓存的组件，`exclude`属性指定不需要缓存的组件。如果不设置这两个属性，则默认缓存所有组件。 如果还是不能解决问题，可以检查一下是否有其他因素影响了`keep-alive`组件的缓存。例如，可能是组件的数据发生了变化导致缓存失效，可以尝试在组件的`activated`生命周期钩子中重新获取数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值