vue.js - NUXT JS中丰富断点时动态更改路由

Question

我很头疼很长时间来为我的问题找到解决方案。

所以让我们开始吧。

我有一个简单的单页网站，我尝试使用 VUE JS 和 NUXT JS 作为静态站点渲染来构建。该站点具有带有导航的粘性页眉，并且页眉和页脚中的导航相同。关键是在滚动到不同的断点时更改事件路线。如何尽快动态更改路由的路径
屏幕顶部交叉，例如 id="about"的 div？

请建议关注 NUXT.js 的最佳解决方案

Answer 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例如。
然后将链接绑定(bind)到您的导航项目，如 :href="link" .您也可以使用多个断点，只需修改 handleScroll你需要的方法。
希望它会有所帮助。