最近在用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
剩余50%内容付费后可查看
本部分为付费内容，支付后可查看
支付5元
已支付？输入手机号查看
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(0)
打赏
上一篇：Beacon API数据上报完美记录活动过程而无需等待响应
下一篇：Axios.js通过AbortController中止控制器方法取消请求
共 0 条评论关于"Nuxt3踩坑经验贴-荆棘载途的坑我来踩，免费的知识大家一起学"
点击取消
最新评论