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

【问题标题】：Change routes dynamically when rich a breakpoint in NUXT JSNUXT JS中丰富断点时动态更改路由
【发布时间】：2018-07-15 15:45:03
【问题描述】：

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

让我们开始吧。

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

请针对 NUXT.js 提出最佳解决方案

【问题讨论】：

尽量不要使用best等最高级的词。这会调用基于意见的答案，这些答案会立即结束。请改写问题并提供相关代码 sn-ps，因为存在许多关于如何实现changing the URL when scrolling to an anchor 的示例，例如。
我认为在到达检查点时更改 url 是一种不好的做法，因为从 SEO 的角度来看，您的 url 将被爬虫视为“重复内容”。符合 SEO 的另一种方法是仅在到达的航点上在您的网址中设置锚点 #<id>。
这很有意义...

标签： vue.js vue-router 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 方法。希望它会有所帮助。

【讨论】：