Nuxt3踩坑经验贴-荆棘载途的坑我来踩，免费的知识大家一起学

作者：管理员 2022-06-17 20:49:32 分类：Vue3新篇章阅读（2402） 0

最近在用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%内容付费后可查看

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

上一篇：Beacon API数据上报完美记录活动过程而无需等待响应

下一篇：Axios.js通过AbortController中止控制器方法取消请求

Nuxt3踩坑经验贴-荆棘载途的坑我来踩，免费的知识大家一起学

一、组件被渲染了两次

二、前进后退短暂样式缺失

懒加载组件

根组件节点只能有一个

相关推荐

共 0 条评论关于"Nuxt3踩坑经验贴-荆棘载途的坑我来踩，免费的知识大家一起学"

点击取消