vue3+Naive UI 使用keep-alive时遇到报错问题

最新推荐文章于 2025-03-07 16:33:40 发布
最新推荐文章于 2025-03-07 16:33:40 发布
阅读量588 收藏 10
点赞数 7
分类专栏： vue3 naive ui 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38181517/article/details/135513526
版权

项目使用vue3+Naive UI，一开始开发到一半没用keep-alive这个组件，后来加进去之后只要切换路由就出现报错情况，如图：
报错内容
代码:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
    at invokeDirectiveHook (runtime-core.esm-bundler.js:2812:47)
    at Array.<anonymous> (runtime-core.esm-bundler.js:5380:25)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:343:46)
    at flushJobs (runtime-core.esm-bundler.js:397:9)

卡了很久，经过不断的查找终于找到了问题，如下
问题点
没错就是这个组件中加了style属性的原因，去掉之后就正常了

Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7769
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
【打工日常】云原生之搭建私有化web在线聊天软件LumenIM
全糖少冰我吃不了苦
04-27 2252
Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发。a.本次实践部署环境为个人腾讯云的测试环境，若是生产环境请谨慎部署；b.本次实践使用了mysql、redis、nginx以及前后端的开源包进行启动测试。
IE中Keep-Alive机制引起的错误
12-30 551
我们知道Http协议是基于TCP/IP连接的，也就是说客户端浏览器向服务器发出一个Http请求并得到响应是要建立一条TCP/IP连接的，但是如果每发出一个Http请求客户端就要向服务器端建立一条TCP/IP连接的话，这样效率会非常低，所以在Http协议中有一个叫做Keep-Alive的机制，如果在服务器端（IIS或Apache等Web服务器）启动Keep-Alive后，客户端浏览器向We...
vue3使用keep-alive 报错：parentComponent.ctx.deactivate is not a function
元元猿的博客
03-07 1941
动态组件未配置key值；如果不配置 key 值，当多个页面配置 keepAlive:true 时，在切换缓存页面时会报错 Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function。需要给动态组件配置 key 值，来表示组件的唯一性和对应关系。
前端页面报警告：runtime-core.esm-bundler.js:40 [Vue warn]: injection “Symbol(pinia)“ not found.
最新发布
weixin_48420104的博客
03-07 648
完整示例'app',sidebar: {...},...}),actions: {...})
解决vue3中使用transition以及keep-alive，切换页面白屏问题
weixin_47239456的博客
05-09 2081
原因：vue3支持组件下有多个节点而不是必须在一个根节点下，但是transition不支持。因此需要排查自己的路由组件是否仅有一个根节点。添加suspense包裹。注意：注释也算根节点。
解决keep-alive在生产环境下失效的问题
阿牛哥的博客
03-01 373
解决keep-alive在生产环境下失效的问题
vue3 keep-alive 动态缓存页面
Yangliwei的博客
10-26 7602
keep-alive 通过keep-alive可以缓存页面,但是有的时候有这种需求: 从首页进入列表页要刷新 从详情页返回列表页不刷新 基本思路 通过vuex 保存需要缓存的列表页数组 通过keep-alive 的 include 来动态获取vuex保存的数组 代码实现 app.vue <router-view v-slot="{ Component }"> <!-- 缓存页面 --> <keep-alive :include="$store.sta
vue3 admin 后台管理项目小计
Zihuatanjo
06-13 2112
render 中 NInput 的value 必须定义onUpdateValue 才能更新视图效果...if (!return new Error('你的校验提示语!')}}}title: '提示',style: {},h('div',{},[h('div', ['您确认一些操作【', h('i', orderNo), '】记录?']),h('div',),h({rule},() =>},}))]),positiveText: '确定',
Naive UI的标签页组件Tabs 切换标签保持位置
06-04
Tabs 组件是 Naive UI 中用来切换标签页的组件，如果想要在切换标签时保持位置，可以使用 `keep-alive` 组件来缓存组件状态。 具体来说，可以将 Tabs 组件嵌套在一个 `keep-alive` 组件中，这样在切换标签时，组件...
keep-alive不起作用的原因
qq_40135999的博客
12-26 206
假如你的组件名小写，在include里面首字符也要替换成大写才行，不是和组件定义的name一致，而是和在vue开发工具里面的显示的组件名字一致。【vue自动替换了我们的不规则命名】
vue3 使用 vant4时 Uncaught (in promise) TypeError: api.now is not a function vue-devtools
yongzhilu的博客
03-25 4667
vue3 使用 vant4时 Uncaught (in promise) TypeError: api.now is not a function vue-devtools
vue3 keep-alive 引起Cannot read properties of null ( reading ‘nextSibling‘)
laozhong110的专栏
07-13 6668
vue keep-alive nextSibling
解决 Cannot read properties of undefined类型的报错
热门推荐
weixin_43706224的博客
03-13 2万+
报错类型一般为两种对象类型对象没有数据的时候为undefined 这个时候访问内部内容就会报错举个例子正常情况 对象有值的时候var obj={name:‘张三’,age:18}#此时对象有数据访问不会报错123对象没值的时候var obj={}#就会报错 Uncaught SyntaxError: Unexpected token ‘.’#表示空对象{}不能使用.1234对象为undefined的时候。
webpack构建vue3项目
weixin_55508765的博客
01-16 2788
在前端工作中，开发vue的话，基本上使用的是基于vue-cli vite等构建的，基于其原理，借鉴了很多大佬的经验，本文记录了使用Webpack从零开始搭建一个TS+Vue3项目的步骤，给大家分享一下。文章后面有源码，包版本。使用的node和pnpm版本如下。
vu3 控制台报错：[Vue warn]: Unhandled error during execution of component
星辰迷上大海的博客
12-14 5105
执行组件事件处理程序时出现未处理的错误
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值