关于路由跳转使用了＜keep-alive＞缓存页面并使用＜transition ＞会报错问题

已于 2024-06-01 10:53:41 修改
阅读量139 收藏
点赞数 1
文章标签： 前端
于 2024-05-30 17:23:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266081/article/details/139330108
版权

报如下错误

runtime-dom.esm-bundler.js:16 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

这个问题我在两年前发现的，当时学艺不精无法解答，回过头来再看这个问题，就很好解决了，无非是切换页面动画切换前置，导致的页面node没有办法获取到，因为我是缓存的页面

解决办法

子路由中 用div包裹

不二家大哥哥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件 keep-alive 和 transition 使用详解
10-16
在`<keep-alive>`组件内部的动态组件(`<component>`)，当不活跃时，`keep-alive`会将其实例保存在内存中，而不是销毁。`include`和`exclude`属性用于指定哪些组件需要被缓存或排除。例如： ```html <keep-alive ...
示例vue 的keep-alive缓存功能的实现
01-19
本篇文章主要介绍了vue 的keep-alive缓存功能的实现，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 <keep>是Vue的内置组件，能在组件切换过程中将状态...
Uncaught (in promise) DOMException: Failed to execute ‘open‘ on ‘XMLHttpRequ
weixin_55229531的博客
05-29 1万+
Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequ
Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to ...报错
Lora_0925的博客
04-21 1万+
今天遇到了 Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at Object.vi [as insertBefore] 这个报错，使用场景： 框架使用的是若依前端框架，在使用按钮权限时，报了这个错。 <el-button type="text" size="small" v-if
vite vue3 中提示错误：The node before which the new node is to be inserted is not a child of this node
qq_17686345的博客
08-16 4423
vite vue3 中提示错误：runtime-dom.esm-bundler.js:10 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
vue3 + vite 项目登录退出后页面白屏并报错
qq_17686345的博客
11-21 1823
vue3 + vite 项目登录退出后页面白屏并报错
Uncaught (in promise) DOMException: Failed to execute ‘postMessage‘ on ‘Window‘: [object Object]
老衲的少女心i~
04-25 7535
背景介绍： 当前项目是一个由angular重构为vue的类型，在angular界面中，开发vue的功能，并通过iframe的方式嵌入到我们的angular项目中。我在子界面找那个想调用父界面的组件，传入信息，处理数据。子界面中通过data: data})传递信息到父界面。但是，我在子界面中(这个是嵌入的iframe界面)，想向父界面传递消息的时候，报错，父界面无法正常接收提示：以下是本篇文章正文内容，下面案例可供参考主要是对postMessaga的传递信息的一些结构化的理解，需要加深。
Uncaught (in promise) DOMException: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
SunPeng的博客
02-15 3343
Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
Vue中keep-alive 实现后退不刷新并保持滚动位置
10-15
在Vue开发中，`<keep-alive>`组件是一个非常重要的特性，它允许我们缓存组件的状态，使得在切换路由或操作后，再次回到该组件时，组件能够保持之前的渲染状态，而不需要重新创建和初始化。这对于提高用户体验，特别...
vue项目优化之通过keep-alive数据缓存的方法
11-26
和 <transition> 相似，<keep> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的...
在VUE3中调用 createApp 时，Vue 为我们做了那些工作？
LuckyWinty的博客
02-23 1182
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在使用Vue3时，我们需要使用createApp来创建一个应用实例，然后使用mount方法将应用挂载到某个DOM节点上。那么在调用createApp时，Vue再背后做了些什么事情呢？今天就来扒一扒Vue3的源码，看看调用createA...
Uncaught (in promise) DOMException谷歌浏览器js报错分析
weixin_43254676的博客
05-27 2831
https://www.inqingdao.cn/5988.html
VUE中路由跳转，多次点击报错路由冗余
m0_65382120的博客
03-29 1294
在router下写 这样就不会报错了，具体我也不知道什么意思 //核心：解决代码冗余 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } ...
Vue3 错误处理
lianyz
01-09 1万+
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'shapeFlag') at setVarsOnVNode (runtime-dom.esm-bundler.js:714) at setVars (runtime-dom.esm-bundler.js:705) at callWithErrorHandling (runtime-core.esm-bundler.js:6737)
vue3调试问题：控制台出现‘Unhandled error during execution of component event handler‘警告
热门推荐
txdingtao的博客
02-09 4万+
问题： （1）版本dd-admin-20220209； （2）runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of component event handler at <ElButton type="primary" loading=false onClick=fn<confirmModifyFn> > at <ElOverlay custom-ma...
Vue3 核心功能的第一次尝鲜经历
全栈修炼
01-16 792
作者：你脑子里的铁线虫 链接：https://juejin.im/post/5e1451385188253ab54142e9前言vue 咱们都知道现在用的最多的是 2.x，但是众所周知在...
runtime-core.esm-bundler.js?5c40:6748 Uncaught TypeError: Cannot create property ‘id‘ on number ‘0‘
weixin_44627093的博客
10-28 7772
<template #default="scope"> <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> <el-popconfirm title="Are you sure to delete this?"> <.
又报错了<transition-group> children must be keyed: <keep-alive>
最新发布
05-20
你可以尝试在你的代码中查找到使用了 <transition-group> 和 <keep-alive> 组件的地方，并在它们的子元素中添加 key 属性。例如： ```html <transition-group> <div v-for="item in items" :key="item.id"> {{ ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值