关于wacth监听路由和keep-alive遇到的坑点

最新推荐文章于 2023-12-27 17:46:15 发布
最新推荐文章于 2023-12-27 17:46:15 发布
阅读量632 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46627254/article/details/106760422
版权

今天做项目简单记录一下碰到的坑点。
首先
项目整体部分页面路由是被缓存起来的，为的是优化性能避免重复刷新
这个时候登录项目点击其中一个页面后，返回后在点击任何页面都会触发这个已经点击页面的wacth监听执行方法，我的理解是路由被keep-alive缓存起来了，没有被销毁才引起的这种触发机制
解决思路
v-if 判是否进入这个路由，如果为
true 那么执行这个wacth方法

浅蓝色·
关注
详解关于Vue2.0路由开启keep-alive时需要注意的地方
10-18
在Vue2.0中，`keep-alive`是一个特殊的组件，用于缓存组件的状态，避免在路由切换时销毁和重新创建组件，从而提高应用性能，尤其是在处理需要频繁切换且数据需要保留的页面时。当开启`keep-alive`，组件将不会被销毁...
vue使用keep-alive后watch事件不销毁解决方案
jstljspservlet的博客
03-30 4284
使用了keep-alive动态缓存页面之后，有一些很难解决的问题： 每个页面里面设置的watch监听事件，如果监听了路由的变化或者vuex的变化，在切换页面的时候不会被销毁 页面上的一些方法会被叠加触发，不知道是不是监听了路由的原因，导致每次切换页面，很多方法会被重复叠加的触发，比如切换第一次触发2次，切换第2次触发3次，第3次触发4次，类似这样的情况 解决方案： 定义一个全局 mixin.j...
vue添加keep-alive缓存后,不能调用销毁(destroyed)事件,刷新或者关闭浏览器事件监听后调用接口(我这里是因为录像异常需要结束录像)
qq_62452129的博客
09-02 901
录像我使用的是webetc(延迟很低,换了很多种这种延迟最低),因为加了缓存后只能调用activated和deactivated,在这里就不再解释这俩生命周期是干什么用的了,因为关闭浏览器和刷新浏览器是同步事件,而调用接口是异步事件,在这里请求接口我使用的是axios,在执行完同步事件的时候,浏览器已经刷新了,并不会去调用异步操作,所以只能使用原生的获取事件。xhr.open('GET', '接口地址',true);// 这里必须是true,并且不可以删除 因为默认是false。// 切换录像已经结束。
Vue keep-alive后不能触发destroyed
u012174809的专栏
05-13 4107
<keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> 当我们在项目中配置了keep-alive后，会发现页面关闭不能触发beforeDestroy。 首先我们来看看keep-alive是什么东西 keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。 它的作用不言而喻 用来...
keep-alive缓存组件（不销毁）
Nikki_u的博客
03-17 210
<keep-alive include="UserName" exclude="UserInfo"> <component :is="comName"></component> </keep-alive> 与keep-alive配合使用的两个钩子函数 当使用keep-alive时 切换页面后使用created钩子函数在本地储存的值不能动态渲染到页面 这时需要配合activated和deactivated使用 生命周期activated--激活时-显示.
keepAlive缓存的使用，监听路由
dianlupeng4187的博客
07-10 782
1.缓存组件： 组件路由routers.js页面添加keepAlive:true { path: 'supplierList', name: 'supplierList', meta: { title: '供应商列表', keepAlive: true }, component: () => import('@/view/data-base/suppl...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue 使某个组件不被 keep-alive 缓存的方法
10-17
监听路由变化 虽然`watch`对象可以用来监听`$route`的变化，但这仅在组件被`keep-alive`包裹时生效。你可以通过监听`$route`来实现组件的自定义行为，例如在路由变化时重置组件状态： ```javascript watch: { '$...
vue里如何主动销毁keep-alive缓存的组件
12-03
在Vue应用中，`keep-alive`组件是一个非常有用的功能，它可以缓存子组件的状态，使得在导航离开和返回时，组件的状态得以保留。然而，当应用涉及到大量缓存组件时，如果没有正确管理，可能会导致内存泄漏，进而引发...
记一次vue2中使用keep-alive时导致的页面图表、数据紊乱的问题
riluokk的博客
04-23 848
当在组件中使用kepp-alive时，keep-alive中如果有其他的缓存页面，会导致从其他页面跳转至缓存页面时造成页面数据紊乱，渲染紊乱的问题，（主要出现在echarts图表样式上）
keep-alive时watch路由route引起的问题用activated解决
lk_123456的专栏
01-16 2412
不添加keep-alive每次进入页面都会重新渲染页面，添加了keep-alive后只渲染一次。但是有个小问题： 动态路由的参数改变后，还是加载以前的页面，created中的数据请求不执行。 此时如果在watch中监听$route是可以的，如果监听到 route 参数变了就重新请求数据（created 中的函数）。 上面方法可以解决，但是由于页面是 keep-alive 的，所以只要路由变了（如...
vue中使用watch监听路由导致多次请求问题解决方法
weixin_45357661的博客
10-26 8603
vue中使用watch监听路由导致多次请求问题解决方法
解决 vue 开启keep-live 监听键盘事件无法移除监听， 同时是自定义vue的 ctrl+f 功能
weixin_47426048的博客
09-29 757
解决 vue 开启keep-live 监听键盘事件无法移除监听 前言 不要去想什么在keepalive 生命钩子里面移除监听，我试了，没用！！ 我这里是自定义写了一个ctrl+f 的功能，监听的是键盘事件，因为是mac os 所以是 if (e.key === 'Meta') // 键盘ctrl 我这里是 commond（mac） if (e.key === 'f') // 键盘f 回归正题，用路由判断监听事件！！！ 代码如下（示例）： mounted() { windo
keepalive 缓存组件
最新发布
修行小蜗牛的博客
12-27 593
进入BooksSetting页面时先将缓存组件放到keeplive中，缓存组件，进入BookImg页面时，watch可以监听到路由，进入其他页面则将keepalive清空。需求：BooksSetting进入BookImg，从BookImg页面回到BooksSetting页面BooksSetting需要缓存。books-setting.vue 需要缓存的组件，router：BooksSetting。// store存储。// 缓存后的组件，可以监听到每次的route变化。
vue组件缓存之keep-alive正确使用姿势
越是安静内敛的人，越容易生不惊人死不休
06-06 7339
em...新的问题又出现了,由于 列表页被缓存了,这个时候我从首页,再点击进入某个列表，也不刷新了，完了，点击首页导航应该进入不同的列表页的. 也就是说，从首页进入列表组件不应该被缓存的。但是但是，我们的项目是用vue开发的webapp,多个组件共用一个窗口，当我们切换路由时，切出路由组件会销毁，所有列表页进入详情页列表页会销毁，重新回到列表页，列表页组件会重新加载。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，
Vue keep-alive 缓存路由和刷新路由
℡メ㏑╭ァ小凯
03-03 3909
1、路由不缓存的时候：tab左右切换页面都会自动刷新，表现形式：工作台Radio选中，然后点DemoTab，再点会工作台，Radio不选中了 <router-view :key="rootkey" style="margin: 5px" /> 2、加上Keep-alive后，实现Tab切换页面状态保存 ，比如工作台文本框写的123，切换tab回来后还显示123，不会清空 <keep-alive> <router-view style="ma...
Vue关于 keep-alive的一些用法以及采坑记录
Candy_mi的博客
09-19 5512
<keep-alive> 可以对不同的组件进行缓存 keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一 个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素 <keep-alive>生命周期 activated：页面第一次进入的时候，钩子触发的顺序是created->mo...
watch监听不到路由的变化
u014788505的博客
12-30 1649
1. 首先watch是组件的一个属性，能监听到的前提是这个组件没有被销毁； 2. watch在父子路由间不会出现监听不到路由变化这种情况； 3. 监听不到是因为组件被销毁了，解决这种方法是在router-view外面 加一层标签keep-alive标签； 5. keep-alive存在的意义就是使组件不被销毁； <keep-alive> <router-view/> </keep-alive> ...
Vue解决keepAlive缓存页面，组件在其他界面重复使用问题
qq_30304193的博客
07-08 2696
问题：keepAlive缓存页面，组件在其他界面重复使用问题。 解决方法：在生命周期beforeRouterLeave销毁组件即可， 组件： <area-select ref="areaSelect"/> 销毁： beforeRouterLeave(to, from, next) { this.$destroy(this.$areaSelect); } ...
vue3+ts 路由 动态keep-alive 缓存
07-11
在 Vue 3 中使用 TypeScript 和路由结合动态 keep-alive 缓存，你可以使用 Vue Router 和 `<keep-alive>` 组件来实现。 首先，确保你已经安装了 Vue Router 和 Vue 3 的相关依赖。然后，在路由配置中添加 `meta` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值