How to implement lazy load with url change? How to change url without actually redirecting?

Question

Vue.js

How to implement a function on a website when the page scrolls down and automatically loads new content and changes the url?
For example, there is this:

data () {
  return {
    articles: [
      {title: 'Article One', slug: 'article-one'},
      {title: 'Article Two', slug: 'article-two'}
    ]
  }
}

<component :data="articles[0]" :is="slug"></component>

If I do something like that on the scroll, then there is a complete transition along the dynamic route, i. it just updates the entire component. And I need it to be added at the bottom of the previous one And the url has changed. An example of what I'm talking about can be seen for example on life.ru. When you go to any article and scroll to the end.
this.$router.push('/article-two')

Answer 1

Ajax load articles, history.pushState to change the URL in the browser.