Nuxtjs踩过的那些坑

2021-08-10 10:18:48

看好Nuxt, 将来一定会走向主流。但是目前,坑确实不少

1. asyncData:

看看官方解释: asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。

限于页面组件的意思是: 不能在非页面组件中使用。如果你想写一个公共组件, 里面使用asyncData,渲染的时候,发现根本找不到你需要的值。 举个栗子(好重啊):

<template>
  <div>
    {{ sss }}
 </div>
</template>

export default {
    asyncData({ params }) {
    const sss = 333
     return {sss}
   }
}

页面报错: [Vue warn]: Property or method "sss" is not defined on the instance but referenced during render.
那怎么办?只能写在created里面了。 但是写在里面却不能渲染到网页上,真让人头疼啊。 感觉跳了一大坑。看看官网给的解决方法:

官网给的解决方案

>如何在组件中使用异步数据?

如果组件不是和路由绑定的页面组件,原则上是不可以使用异步数据的。因为 Nuxt.js 仅仅扩展增强了页面组件的 data 方法,使得其可以支持异步数据处理。
对于非页面组件,有两种方式可以实现数据的异步获取:
1. 在组件的 mounted 方法里面实现异步获取数据的逻辑,之后设置组件的数据,限制是:不支持服务端渲染。
2. 在页面组件的asyncData或fetch方法中进行 API 调用,并将数据作为props传递给子组件。服务器渲染工作正常。缺点:asyncData或页面提取可能不太可读,因为它正在加载其他组件的数据。总之,使用哪种方法取决于你的应用是否需要支持子组件的服务端渲染。

 

希望Nuxt的作者改进一下

2. nuxt提示TypeError: Cannot read property '_normalized' of undefined"    

提示这个,是因为nuxt-link的to地址没有添加或者添加了错误地址

 

3. NUXT.JS报错WINDOW IS NOT DEFINED

是因为你引入了第三方插件。由于nuxt.js会在服务端渲染页面,而服务端并没有window或document。官方给出的解决方案如下: Window 或 Document 对象未定义 https://www.nuxtjs.cn/faq/window-document-undefined 。不幸的是:我按照官网的贴上代码,并没有成功, 那只能找其他的解决方案了。以vue-seamless-scroll插件为例

在plugin下新建文件vue-seamless-scroll.js

import Vue from 'vue';
import scroll from 'vue-seamless-scroll';

export default () => {
	Vue.use(scroll)
}

在nuxt.config.js中添加代码

 plugins: [
    '@/plugins/element-ui',
    { src: '@/plugins/vue-seamless-scroll', ssr: false }
  ],

世界终于清静了。 继续搬砖了

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO