nuxt.js中使用fullPage.js, 页面刷新后无效

Question

nuxt.js项目中, mounted里初始化fullPage, 路由跳到这个页面全屏滚动没有问题, 在这个页面点浏览器的刷新按钮之后, 就只显示第一屏, 不能滚动了, 求大佬解答
jq和jquery.fullpage.min.css都引入了

if (process.browser) {
    require('fullpage.js/dist/jquery.fullpage.min.js')
    $('#fullpage').fullpage({
        recordHistory: false,
        navigation: true,
        navigationPosition: 'right',
        paddingTop: 40,
        onLeave (index, nextIndex, direction) {
            that.nextIndex = nextIndex
        }
    });
}

Answer 1

我也遇到了同样的问题！

Answer 2

mounted() {
    if ($('html').hasClass('fp-enabled')) {
      $.fn.fullpage.destroy('all');
    }
    $(function () {
      $("#ido").fullpage({
        //绑定菜单
        anchors: ['page1', 'page2', 'page3', 'page4'],
        menu: '#menu',
        css3: true
      });
    });
  },
  beforeDestroy() {
    // 页面离开的时候 一定要销毁fullpage实例  不然页面无法滑动
    if ($('html').hasClass('fp-enabled')) {
      $.fn.fullpage.destroy('all');
      $('#menu').remove();
    }
  }

Answer 3

this.$nextTick(() => {
      let time = setInterval(() => {
        if (JSON.stringify(new fullpage()) === '{}') {
          clearInterval(time)
          this.meun = new fullpage('#meun', {
            autoScrolling: true,
            scrollHorizontally: true,
            css3: true
          })
        }
      }, 10)
    })

这样完成即可，尝试已有效果