Question

我一直在阅读Nuxt.js关于插件的文档和用于添加脚本的config nuxt文件。我试过了，但没有运气。

我正在尝试添加以下代码（位于/static/js/scripts.js）：

 $(window).scroll(function(){
     if ($(window).scrollTop() >= 200) {
        $('nav').addClass('fixed-header');
     }
     else {
        $('nav').removeClass('fixed-header');
     }
 });

有人能帮助我吗？

在常规HTML使用中，我只是在结束正文标记之前执行脚本标记（为了用户体验）。我能够在Vue.js 2.0框架中加载scripts.js，但是一旦我将所有内容移动到Nuxt.js，并尝试将其调整为Nuxt.js，其他一切都有效，除了{{1文件。

Answer 1

[解决]！

我明白了！我不得不回顾一下Vue.js文档，因为Nuxt.js文档根本没有帮助我。

所以我基本上进入了包含导航栏的vue文件，我希望该类根据滚动显示切换。我还必须修改javascript以使它的ESLINT友好...所以对于下面的代码相当于我在我的问题中所写的内容。

<script>
export default {
  name: 'MainNav',
  data: function () {
    return {
      fixedOnScroll: false
    }
  },
  methods: {
    handleScroll () {
      if (window.scrollY >= 200) {
        this.fixedOnScroll = true
      } else {
        this.fixedOnScroll = false
      }
    }
  },
  created () {
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  beforeUpdate () {
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  }
}
</script>

一旦解决了这个问题，我就不得不在同一个文件的模板标签中使用vue bind类。

<nav class = "navbar-expand-lg text-center" v-bind:class="{ 'fixed-header': fixedOnScroll }">

之后一切都很完美！

Answer 2

Nuxt v1.4.0文档中的官方指南在此处：https://nuxtjs.org/faq/window-document-undefined#window-or-document-undefined-

如果您需要指定   您只想在客户端导入资源，您需要使用   process.browser变量。

例如，在.vue文件中：
build: {
  vendor: ['external_library']
}
如果您在多个文件中使用此库，我们建议您这样做您可以通过nuxt.config.js将其添加到供应商包中：
MvxTabBarViewController

如何将客户端脚本添加到Nuxt.js？

2 个答案: