最近在用Nuxt3做个demo,将博客页面直接扣出来作为模板,发现一个神奇的bug,页面组件内容被渲染了两次,经过反复排查确认了原因,我踩过的坑大家就没必要再踩,特此记录一下最近学习nuxt3遇到的一些坑
检查page页面template中出否出现body标签,nuxt会把page页面自动渲染到body中,如果页面组件中再包含body标签,nuxt就会把当前页面内容渲染两次
从我抓取到的截图可以看出,css是在html加载完成后塞进去的,此时能看到css这行代码,但还未解析,页面前进后腿过程中初始化css比页面晚加载渲染,这个问题不排除是bate版本的bug,我是将公共全局main_min.css配置在nuxt.config的css中出现这个问题,于是尝试放在layout组件的页面头部组件中,自然一样能达到所有页面被引用的目的,神奇的是在layout头部header组件去引用竟然没这个问题
说实话,nuxt3的组件懒加载这块我没看懂什么滑头,感觉和vue自身的v-if没啥区别,采坑:注意懒加载组件命名不要和page页面名字一样,否则调用渲染有问题,而且我在测试过程中用LazyTest进行懒加载组件命名时候,页面必须要用lazyTest开头小写去调用,而其它名字没问题,这个bug很神奇,不知道是否因为目前nuxt3还是bate版本bug问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <div> <h1>Mountains</h1> <LazyMountainsList v-if="show" /> <button v-if="!show" @click="show = true">Show List</button> </div> </template> <script> export default { data() { return { show: false } } } </script> |
1 2 3 4 | <template> <p>使用一个懒加载的组件</p> <lazyMountainsList v-if="show" /> // 如果懒加载组件用LazyTests,看看LazyTests大驼峰命名能否页面直接调 </template> |
其实这个问题写过vue2的大家都知道,不过在vue
上一篇:Beacon API数据上报完美记录活动过程而无需等待响应
下一篇:Axios.js通过AbortController中止控制器方法取消请求
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"Nuxt3踩坑经验贴-荆棘载途的坑我来踩,免费的知识大家一起学"
最新评论