Nuxt 中的 AOS 在页面之间切换时不起作用

Question

我试图在我的 Nuxt 项目中以“通用”模式使用 AOS，但我在切换页面时遇到了问题。当我手动重新加载页面时，该工具工作正常，但由于某种原因，当我在页面之间切换时 AOS 停止工作。例如，在我的主页上，我的文字淡出，当我第一次进入主页时，当我将该元素滚动到视图中时它就会起作用。但是，如果我离开主页，然后在某个时间点返回主页，则文本不再淡出并保持隐藏或不透明度为零。

这是我项目插件目录中的aos.js插件

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
Vue.use(AOS.init())

这是nuxt.config.js中的插件数组

plugins: [
    { src: '~plugins/aos', ssr: false, mode: 'client' },
  ],

这是我的 Vue 组件中的 HTML 元素。

<div
   :class="{
      'py-6': true,
      'px-6': !isMobile,
      'px-0': isMobile,
   }"
   data-aos="fade-up"
   data-aos-duration="1000"
>
   ...content in here...
</div>

任何帮助将不胜感激。谢谢。

Answer 1

接受的答案对于较新的 Nuxt 版本不再有效。对于在 Nuxt 中处理浏览器 window 的库，您必须禁用 SSR。你可以阅读更多关于这个https://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only

export default {
  plugins: [
    { src: '~/plugins/aos.js', mode: 'client' }, // only in client side
    '~/plugins/aos.client.js', // this syntax also works
  ]
}

Answer 2

您必须为在 Nuxt 中处理浏览器窗口的库禁用 SSR，例如这应该可以工作

plugins: [
  { src: '~plugins/aos', ssr: false },
],

您可以在文档https://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only中找到更多信息