Change routes dynamically when rich a breakpoint in NUXT JS

Question

I have a headache for a long time to find a solution for my question.

So lets start.

I have a simple single page website, that i try to build with VUE JS and NUXT JS as static site render. That site has sticky header with navigation, and the same navigation in header and footer. The point is to change active route when scroll to different breakpoints. How to change dynamically route`s path as soon as top of the screen crosses for example div with id="about"??

Please suggest the best solution staring on NUXT.js

Try not to use superlative words such as `best`. This invokes opinion-based answers which are an immediate close. Please reword the question and provide relevant code snippets as many examples exist on how to achieve [changing the URL when scrolling to an anchor](https://stackoverflow.com/questions/14660580/change-url-when-manually-scrolled-to-an-anchor), for example. — Ohgodwhy, Feb 05 '18 at 17:47
I think change url on reached checkpoint is a bad pratice, because from a SEO point of view your urls will be considerd as "duplicate content" by crawlers. Another way SEO compliant is to set an anchor `#` in your url only on reached waypoint. — Nicolas Pennec, Feb 06 '18 at 07:28

score 2 · Answer 1 · edited Mar 23 '18 at 08:16

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);
    }
  }

You need to grab your breakpoint values and insert them instead of YourElement offsetTop. You can do it via $refs for example. Then bind link to your nav items like :href="link". You also can work with multiple breakpoints, just modify handleScroll method as you need. Hope it will help.

Change routes dynamically when rich a breakpoint in NUXT JS

1 Answers1