`Vue Router - Dynamically update route anchor on scroll`

Question

`Vue Router - Dynamically update route anchor on scroll`

My goal is to achieve the same routing behavior on my website as demonstrated here: https://router.vuejs.org/guide/#html. If you observe, the link changes to https://router.vuejs.org/guide/#javascript when you scroll down, and reverts when scrolling back up. Additionally, the page retains your position even after reloading.

To implement a similar scroll behavior in my router, I have added the following code:

  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        return { selector: to.hash }
    } else if (savedPosition) {
        return savedPosition;
    } else {
        return { x: 0, y: 0 }
    }

While I have managed to create links that direct to anchors and update the route accordingly, I am still puzzled on how to replicate the dynamic behavior observed on the Vue Router website. It's a bit ironic that I chose their site as an example, but nonetheless, any suggestions on achieving this level of functionality?

javascript vue.js url-routing vue-router

Answer 1

Answer №1

To implement this functionality, you can utilize an IntersectionObserver to monitor all sections within the page. Upon detecting a section entering the viewport, extract its id and update the route accordingly:

<div class="section" id="css">
  ...
</div>

<div class="section" id="react">
  ...
</div>

data () {
  return {
    sectionMonitor: null
  }
},
mounted () {
  this.watchSections()
},
methods: {
  watchSections() {
    try {
      this.sectionMonitor.disconnect()
    } catch (error) {}

    const options = {
      rootMargin: '0px 0px',
      threshold: 0
    }
    this.sectionMonitor = new IntersectionObserver(this.sectionMonitorHandler, options)
  
    // Monitor each section
    const sections = document.querySelectorAll('.section')
    sections.forEach(section => {
      this.sectionMonitor.observe(section)
    })
  },
  sectionMonitorHandler (entries) {
    for (const entry of entries) {
      if (entry.isIntersecting) {
         const sectionId = entry.target.id
         // Update route with sectionId
         this.$router.push({ name: this.$route.name, hash: `#${sectionId}` })
      }
    }
  }
}

Additionally, as suggested by @Sigi, consider using this.$router.replace() instead of this.$router.push() in the sectionMonitorHandler to prevent cluttering the navigation history.

Answer 2

To implement this functionality, you can utilize an IntersectionObserver to monitor all sections within the page. Upon detecting a section entering the viewport, extract its id and update the route accordingly:

<div class="section" id="css">
  ...
</div>

<div class="section" id="react">
  ...
</div>

data () {
  return {
    sectionMonitor: null
  }
},
mounted () {
  this.watchSections()
},
methods: {
  watchSections() {
    try {
      this.sectionMonitor.disconnect()
    } catch (error) {}

    const options = {
      rootMargin: '0px 0px',
      threshold: 0
    }
    this.sectionMonitor = new IntersectionObserver(this.sectionMonitorHandler, options)
  
    // Monitor each section
    const sections = document.querySelectorAll('.section')
    sections.forEach(section => {
      this.sectionMonitor.observe(section)
    })
  },
  sectionMonitorHandler (entries) {
    for (const entry of entries) {
      if (entry.isIntersecting) {
         const sectionId = entry.target.id
         // Update route with sectionId
         this.$router.push({ name: this.$route.name, hash: `#${sectionId}` })
      }
    }
  }
}

Additionally, as suggested by @Sigi, consider using this.$router.replace() instead of this.$router.push() in the sectionMonitorHandler to prevent cluttering the navigation history.

`Vue Router - Dynamically update route anchor on scroll`

Answer №1

Similar questions

Is there a way to access the initial item in a JavaScript array?

Switching out text when hovering with Jquery or JavaScript

Checking CORS permissions with a pre-flight OPTIONS request

What happens when the `.push` command runs the "Undefined" function in jQuery - is it possible to execute a number instead?

Handling responses from http requests in Node.js

Safari experiences occasional failures with pre-signed post uploads to S3 when using multipart/form-data for file uploads

Vue - Troubleshooting why components are not re-rendering after data updates with a method

axios interceptor - delay the request until the cookie API call is completed, and proceed only after that

Obtaining the pathname in a NextJS file like _document.js is a matter of accessing

RxJS: Transforming an Observable array prior to subscribing

What could be causing the issue with the computed property not functioning correctly as the v-model on the Vuetify date

What is the distinction between declaring a variable as var $a=$() versus var a?

When touch-triggered on IOS, HTML5 Web SQL Transactions were smoothly bypassed without any errors

How can I modify the text that appears when hovering over an element?

Using Puppeteer and Scrapy, this innovative Web Crawler with Scraper combines the power of both

Verify if the property in every element of the array is not empty

The $or operator in mongoose falls short in providing complete data when paired with the find() method

1. Catalog of dual JSON inquiries2. Compilation of

Utilize Node.js v16 for the execution of chaincode operations

Tips for linking weight scale device to a website