Nuxtjs踩过的那些坑

看好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 }
  ],

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