Vue3实战笔记(65)—记录本项目浪费不少时间求证的问题

文章目录


前言

笔记最重要的作用就是温故而知新,最近遇到不少问题都是曾经遇到的,知道就是想不起来,查查自己的笔记都轻松解决了,老怀甚慰,深刻的意识到及时记录问题的重要性,今天记录几个最近遇到的几个看似简单解决起来却比较耗时的问题。


一、多个根问题

1、多个router-view之间切换,我从子路由切换到其他的router-view,路由过去了,界面没反应。尝试了很多方案,甚至使用router-view命名方式,也没有解决。

解决方案:

最外层router-view 使用了过渡动画,导致的这个问题的原因是:

runtime-core.esm-bundler.js:39 [Vue warn]: Component inside renders non-element root node that cannot be animated.

javascript 复制代码
    <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
          <component :is="Component" />
      </transition>
    </router-view>

这个问题很恶心,如果子组件有多个根节点上述写法就会报错,如果组件没有多个根还不报警告,为了不一一更改多个组件,改善一下,加个div

javascript 复制代码
  <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
        <div >
          <component :is="Component" />
        </div>
      </transition>
    </router-view>

二、动画失效

上一个问题解决了,但是这样改有时候动画会失效,更恶心的还会出现动画弹出来了,内容没了。解决方案需要加个key,transition会根据是key的变化判断元素改变,

触发动画:

javascript 复制代码
 <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
        <div :key="$route.path">
          <component :is="Component" />
        </div>
      </transition>
    </router-view>

三、首次加载动画效果不生效,不同router-view之间切换无动画效。

解决方案:增加首次加载动画生效属性appear

javascript 复制代码
 <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
        <div :key="$route.path">
          <component :is="Component" appear />
        </div>
      </transition>
    </router-view>

总结

这几个问题看似简单却无迹可寻,网上和官网找不到很直接的答案,都是一步步断点,看源码,分析原理思考各种可能性,慢慢探索解决。学习技术不能不求甚解,拿来主义,复制过来或者看看文档的用法,很多问题是自己解决不掉的。一入动画深似海。。。这几个问题看似简单却无迹可寻,网上和官网找不到很直接的答案,都是一步步断点,看源码,分析原理思考各种可能性,慢慢探索解决。学习技术不能不求甚解,拿来主义,复制过来或者看看文档的用法,很多问题是自己解决不掉的。一入动画深似海。。。

不忧过往,不惧未来,把握今朝,心怀宇宙浩渺。不忧过往,不惧未来,把握今朝,心怀宇宙浩渺。

相关推荐
yanlele5 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
Dann Hiroaki11 分钟前
笔记分享: 哈尔滨工业大学CS31002编译原理——02. 语法分析
笔记·算法
KhalilRuan27 分钟前
Unity-MMORPG内容笔记-其三
笔记
中微子1 小时前
React状态管理最佳实践
前端
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
kfepiza2 小时前
Debian的`/etc/network/interfaces`的`allow-hotplug`和`auto`对比讲解 笔记250704
linux·服务器·网络·笔记·debian
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258592 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端