在vue路由当中使用keep-alive避免多次加载组件，减少消耗

最新推荐文章于 2023-11-06 17:30:29 发布
最新推荐文章于 2023-11-06 17:30:29 发布
阅读量273 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/kugeliu/p/7118243.html
版权

今天在vue当中使用了full-page这个组件。但是发现在每次路由跳转完之后，再回到使用fullpage的这个页面，fullpage会报错，fullpage只能初始化一次。

这个时候给路由使用keep-alive就可以完美的解决这种问题了

 

 

但是同时会导致一个问题，由于组件缓存了，会导致beforeDestroy和destroyed两个生命周期消失

转载于:https://www.cnblogs.com/kugeliu/p/7118243.html

weixin_30690833
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue router缓存，导致页面多次请求接口
qq_35994750的博客
02-13 1122
ps：所有.vue组件文件都必须附上name属性！建议用vuex管理cachedViews。
vue组件 keep-alive 和 transition 使用详解
10-16
在Vue.js中，`keep-alive`和`transition`组件是两种非常重要的功能，它们分别用于组件的状态管理和过渡效果。 1. **`keep-alive`组件**：`keep-alive`的主要作用是缓存组件，使得组件的状态在切换时得以保留，避免...
详解vue-router数据加载与缓存使用总结
10-17
主要介绍了详解vue-router数据加载与缓存使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决其他路由组件滚动的时候触发了 添加了keep-alive和v-infinite-scroll组件的滚动加载方法导致不断加载
weixin_46748834的博客
12-23 669
解决其他路由组件滚动的时候触发了 添加了v-infinite-scroll、且已经缓存的组件的滚动加载方法导致不断加载
keep-alive vue组件缓存避免多次加载相应的组件
weixin_30379531的博客
05-10 351
keep-alive vue组件缓存避免多次加载相应的组件 转载于:https://www.cnblogs.com/zhaoyun4122/p/10845401.html
Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法
最新发布
(黎子)人生编码
11-06 304
通过components事先定义好所有会加载的组件：tagPage 通过ref或computed的方式判断当前的标签的类型并返回：这个时候keep-alive是工作的，但这里的问题是：动态创建的组件有多个是同一个组件，比如APIAdd,由于keepalive的缓存机制是通过组件名称来缓存的，同一个组件被打开多次的话其实显示的还是第一次打开的那个，这和我们实际的应用场景不符合，不能缓存界面状态（比如表单中输入的内容）
keep-alive不能缓存多层级路由菜单问题解决
11-21
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...
vue中keep-alive组件的入门使用教程
12-10
Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...
详解Vue路由开启keep-alive时的注意点
01-19
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺...
vue 使某个组件不被 keep-alive 缓存的方法
12-11
最近在做项目发现一个问题，当我使用了 keep-alive 标签后，进入了某个路由进行一系列操作，再点击浏览器后退，再次进入刚才的路由，页面被操作的数据没有初始化！ 分析问题 这是因为 keep-alive 将路由页面缓存，...
vue3中开启了keepAlive但是页面仍然会刷新走生命周期的解决方案
个人笔记
10-10 1415
vue3中开启了keepAlive但是页面仍然会刷新走生命周期的解决方案
Vue中利用keep-alive-快速实现页面缓存-案例
JackieDYH的博客
08-25 2002
keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被
解决 vue 多层级路由 缓存失效 解决基于 keep-alive 的多级路由缓存问题 vue keep-alive 缓存失效 vue-element-admin多层级路由 缓存失效
半只
07-15 4018
首先keep-alive是在Layout上进行处理，如果不缓存Empty，则Empty下面的页面将无法被缓存，如果缓存Empty，又会导致Empty里面的所有页面都被缓存，无法按需清除，相信接触过的肯定感同身受其中的大坑。这里需要注意，路由配置还是保持多级嵌套的形式，而这个配置并非最终注册使用的路由，仅仅是提供侧边栏导航菜单使用，同时再生成一份用于动态注册路由的数据，图例如果没看明白的话，可以看下面两组数据。进行显示了，所以在处理路由数据的同时，也需要处理面包屑导航的信息。...
Vue解决keepAlive缓存页面，组件在其他界面重复使用问题
qq_30304193的博客
07-08 2622
问题：keepAlive缓存页面，组件在其他界面重复使用问题。 解决方法：在生命周期beforeRouterLeave销毁组件即可， 组件： <area-select ref="areaSelect"/> 销毁： beforeRouterLeave(to, from, next) { this.$destroy(this.$areaSelect); } ...
Vue路由开启keep-alive时的注意点
热门推荐
大灰狼的小绵羊哥哥的博客
03-15 1万+
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了 keep-alive 的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。 HTML部分： template> div class="
Vue keep-alive防止重复渲染DON总结
唐策的博客
05-09 6289
&lt;keep-alive&gt;是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 &lt;keep-alive&gt; 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 &lt;transition&gt; 相似，&lt;keep-alive&gt; 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: inclu...
Vue中的keep-alive的使用·
weixin_40944062的博客
03-27 576
<keep-alive>的使用 使用背景: 有些组件不需要多次的init,但是,vue中,每次点击对应的页面,每次都会进行重新的数据请求和页面DOM组件树的渲染 用户在点击某个链接跳转到下个页面后,想返回上一个页面的时候,上次的操作痕迹还在. 使用方法: 使用vue中的keep-alive组件,组件地址:https://github.com/vuejs/vue/blob/dev...
Vue 创建组件外壳VNode原理分析
lznism666的博客
09-17 505
创建组件VNode <div> <test></test> </div> 上面这个页面被解析成了一个渲染函数 function() { with(this) { return _c('div', [ _c('test') ]) } } 这个_c就是创建VNode的入口，也就是实际上的_createElement函数 function _createElement( co
vue2中keep-alive缓存指定路由组件
05-17
在 Vue2 中，你可以使用 `keep-alive` 组件来缓存指定的路由组件。`keep-alive` 组件可以缓存被包裹的组件的状态，以避免每次切换到该组件时都重新渲染。 要缓存指定的路由组件，你需要在路由配置中给该路由组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值