动态设置keepAlive的问题

已于 2022-06-15 11:57:13 修改
阅读量671 收藏
点赞数
分类专栏： VUE 文章标签： 前端 javascript vue.js
于 2022-04-26 15:09:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ju_vlog/article/details/124316659
版权 

需求：(1).用户从首页进入表单页时候，表单页清空缓存（keepAlive=false)
     (2).用户从其他页面进入表单页时候，表单页不需要清空缓存（keepAlive=true)

思路：

1.在app页面里给keepAlive设置一个动态的 :exclude="cachedViews"，cachedViews：this.$store.state.cachedViews

2.当从首页进入表单页时候，再routerLeave里进行操作：触发mutation里的添加keepAlive方法

3.当从表单页离开时候，再routerLeave里进行操作，触发mutation里的删除keepAlive方法

再吸一口居居
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue动态改变keepAlive缓存
前端的小刘老师
01-10 6666
功能需求： 大家都知道keep-alive组件的作用，在实际开发过程中，经常会遇到对部分组件进行缓存，常用操作方法见另一篇博客 [link]
Vue keep-alive 动态控制缓存页签
weixin_42613910的博客
11-13 265
Vue 的 keep-alive 是一个抽象组件，用于缓存动态组件或组件树，以减少组件的重复渲染。使用 keep-alive 可以提高应用的性能。想要动态的控制页签的缓存，也就是在页签导航栏切换页签的时候不改变页面的状态，但是在右键刷新页签或关闭页签重新从左边菜单栏打开页签的时候，希望能够重新加载新页面。
vue组件缓存之动态设置keep-alive缓存
最新发布
weixin_61211370的博客
04-02 343
vue组件缓存之动态设置keep-alive缓存
keep-alive Vue-动态组件怎么使用
技术前端，忠于热爱 @0.活在风浪里
12-06 1070
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
vue中动态化的按需使用keep-alive
青梅煮码
04-25 223
1、啥是 keep-alive？ 就是缓存，我们还是来看看具体的使用场景。首先简单一点，第一种比较普遍的场景，当我们从首页-->列表页-->商详页-->再返回，这时候列表页应该是需要keep-alive的。然后第二种，当我们从首页-->列表页-->商详页-->返回到列表页(需要缓存)-->返回到首页(需要缓存)-->...
关于 keep-alive Vue-动态组件使用
weixin_42216520的博客
05-16 1772
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。 用keep-alive包裹的路由页面路由地址不改变时，组件实例不会被销毁 使用场景： 例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive包裹,再切换到详情的时候，把商品页状态位置保留在内存中，没有销毁,（自身不会生成dom元素）等从详情返回的时候，页面还是之前
vue项目动态设置页面title及是否缓存页面的问题
01-21
跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了。 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title ...
vue keep-alive 动态删除组件缓存的例子
12-13
业务需求： 切换tab页标签的时候（路由前进的时候），缓存当前组件数据，关闭tab页标签的时候清除组件缓存。...总结：通过动态的设置include（要缓存的组件）的数组，来动态的控制组件是否缓存 以上这篇vue keep-aliv
PPP：PPP使用LCP设置和维护链路
07-17
　Keepalive问题 1） 使用show interface查看是否keepalive被禁用，或校验keepalive被正常配置2） 如果keepalive设置错误，进入配置模式并在接口上指定keepalive间隔 　封装类型 1） 校验两端路由器的封装方式相同...
NLog.Contrib.Targets.LogEntries:简单的LogEntries NLog目标可以在Linux上正常工作。 使用SSL，将多个目标（即使使用不同的令牌）多路复用到同一连接中，是异步的，并且令牌也可以在环境变量中设置
05-17
UTF8转换是使用静态数组完成的，而不是动态创建数组的。 它不执行其他字符串连接以将数据格式化为预期的协议格式。 出现套接字错误时，它不会丢失缓冲的序列化条目。 的使用的是Linux 不支持的API。 由于未将...
串口通讯服务器解决方案.doc
06-07
在使用Socket方式时，请打开TCP/IP的KeepAlive机制，并将检测超时设置为10秒，这样 可以快速检测出网络故障，并做出相应处理。 两个（或多个）串口服务器透明传输 串口服务器A设置为TCP/IP Server模式，串口服务器B...
vue动态缓存，keep-alive，vuex
couch potato的博客
06-07 373
keep-alive
vue3，vite开发, 动态引入组件，同时动态设置组件的name，用于keep-alive缓存
qq_35487047的博客
03-07 4709
vue3，vite开发，动态引入组件，同时动态设置组件的name，用于keep-alive缓存
vue keepalive 动态设置缓存
weixin_30266829的博客
09-19 563
场景：A首页、B列表页、C详情页B---->C 缓存‘列表1’详情的数据A---->C 读取‘列表1’详情的数据B---->C (希望清除‘列表1’的缓存，变成缓存‘列表2’详情的数据) A---->C 问题出现了，读取的竟然还是‘列表1’的缓存数据。 main.vue 1 2 &l...
vue配合element-ui的tabs动态设置keep-alive动态缓存3级路由页面
帆酱的博客
08-09 3387
二级路由挂载点，由于二级路由页面只有几个基础页面，例如注册登录等，因此全部缓存，如果不缓存的话，会导致切换到二级路由页面后，缓存的三级页面失效。需要注意的是include/exclude绑定的属性是页面中设置的name值 而不是路由中的name值。当在实际项目中 可以运用vuex保存你需要缓存的页面的name值,可以配合tabs使用。当在几个tabs之间来回切换时，不需要更新vuex，直接router跳转就行。下面是配合element-ui的tabs使用。当删除tabs时，同样更新vuex。......
keep-alive动态缓存(配合vuex)
wupinlong的博客
08-09 883
需求： 页面顺序，从A到B到C，对于B 页面，进入C页面时，需要缓存，进入A页面时，不需要缓存，A进入B的时候是要刷新的。所以，问题就是，如何让keep-alive 缓存动态进行？ 思路就是： 动态改变keep-alive的include数组。 首先创建A,B,C页面 -----a.vue <template> <div> <div @click="handleGo">a页面</div> <input /> </d
vue 动态组件 创建 缓存 keep-alive 激活 activated deactivated
259的博客
12-22 478
vue 动态组件 创建 缓存 激活 keep-alive activated deactivated
控制VUE路由组件的keep-alive
weixin_48349367的博客
04-19 453
在项目制作中，针对一些列表页我们往往会使用keep-alive来保持路由组件的状态，这样做的目的是当我们从列表页面进入详情页面再返回的时候，列表页的组件状态以及数据能保持离开前的状态，避免一些状态丢失以及减少数据的请求。 router.meta 早期，我往往会使用router中的meta属性来控制当前路由组件是否需要保持状态，具体会在路由控制的index.js里写上如下代码： export default new Router[{ routes: [{ path: '/list',
vue3 动态keepalive 缓存
07-11
Vue 3 中的动态 `keep-alive` 组件可以用于缓存动态组件，以提高应用的性能和用户体验。在 Vue 3 中，`keep-alive` 组件已经被重命名为 `Teleport`，但其功能仍然类似。 要在 Vue 3 中使用动态 `keep-alive` 缓存组件，可以按照以下步骤进行操作： 1. 首先，在需要缓存的组件外部包裹一个 `Teleport`（或 `keep-alive`）组件，并设置一个唯一的 `key` 属性。例如： ```vue <template> <Teleport v-bind:key="componentKey"> <component :is="currentComponent"></component> </Teleport> </template> ``` 2. 然后，在你需要切换的组件上，通过修改 `componentKey` 的值来触发组件的重新渲染。例如： ```vue <template> <button @click="toggleComponent">切换组件</button> </template> <script> export default { data() { return { currentComponent: 'ComponentA', componentKey: 0 }; }, methods: { toggleComponent() { this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'; this.componentKey += 1; } } } </script> ``` 在上面的例子中，每当点击按钮时，`currentComponent` 的值会切换为另一个组件的名称，而 `componentKey` 的值会加 1。这样，`Teleport` 内部的组件会重新渲染，并且之前渲染过的组件会被缓存起来。 请注意，Vue 3 中的 `Teleport` 组件需要配合 Vue 的全局 `provide/inject` API 使用，以确保组件状态的正确传递。如果你需要更详细的示例或更多关于 Vue 3 动态 `keep-alive` 的信息，可以参考 Vue 3 的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值