在NUXT JS中丰富断点时动态更改路由-Java 学习之路

很长一段时间我都很难找到解决问题的方法 .

让我们开始吧 .

我有一个简单的单页网站，我尝试用VUE JS和NUXT JS构建静态网站渲染 . 该网站具有带导航的粘性 Headers ，以及页眉和页脚中的相同导航 . 重点是滚动到不同的断点时更改活动路线 . 如何在屏幕顶部越过动态路径的路径，例如div = id =“about”？

请建议盯着NUXT.js的最佳解决方案

1 回答

data() {
    return {
      link: 'https://example.com'
    }
  },
  methods: {
    handleScroll() {
      let scrollAmount = document.documentElement.scrollTop
      if(scrollAmount >= YourElement offsetTop) {
        this.link = 'https://expmaple-2.com'
      }
    }
  },
  created() {
    if (process.client) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener('scroll', this.handleScroll);
    }
  }

您需要获取断点值并插入它们而不是 YourElement offsetTop . 例如，您可以通过 $refs 来完成 . 然后将链接绑定到您的导航项目，如 :href="link" . 您还可以使用多个断点，只需根据需要修改 handleScroll 方法 . 希望它会有所帮助 .

回复于 2024-05-02T05:45:35+08:00

在NUXT JS中丰富断点时动态更改路由

1 回答

相关问题