Question

我已经搜索了一个解决方案并提出了这个代码

methods: {
  handleScroll () {
    console.log(window.scrollY)
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}

不幸的是，这对我不起作用。我也尝试将窗口更改为document.body。

错误讯息为Window is not defined

Answer 1

window未定义，因为nuxt JS是服务器端呈现的。

请尝试使用process.browser变量

methods: {
  handleScroll () {
    console.log(window.scrollY)
  }
},
created () {
    if (process.browser) { 
        window.addEventListener('scroll', this.handleScroll);
    }
},
destroyed () {
    if (process.browser) { 
        window.removeEventListener('scroll', this.handleScroll);
    }
}

有关详细信息，请参阅link

Answer 2

在window或created中使用beforeCreate或任何其他特定于浏览器的API会导致问题，因为document或window之类的特定于平台的API在服务器（发生SSR的服务器）上不可用。而是将逻辑从创建移动到beforeMount中。将其保留在创建状态并通过process.browser进行检查也可以，但是不太干净，并且很容易引起混淆。

export default {
  methods: {
    handleScroll () {
      // Your scroll handling here
      console.log(window.scrollY)
    }
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

只有created和beforeCreate在服务器和客户端双方执行。因此，您不需要保护beforeMount或beforeDestroy中的ifs。

进一步了解ssr-ready Vue components

如何在vue nuxtjs中收听滚动事件？

2 个答案: