Problem when use History go back

ernestocuzcueta

Hi people

I have the following problem:
In my home page the system list posts in a infinity scroll, the user can scroll and scroll and in a moment he can enter to see the post,
He enter to the item using this code:

this.$router.push(post.url)

The problem is when the user click in the “go back button” of the browser. In the original version the system load the content of the infinity scroll and the user lost his position.
I modified it, and changed the code:

<keep-alive>
          <router-view :key="this.$route.fullPath />
</keep-alive>

This works well with the go back, but it never load more contents or reset the home, or never load the item page again if this was changed by other user

“keep alive” seems to generate static content, I don’t need static content for all the pages.

How can resolve the “go back” so the user can continues chcking his list

Sorry for my english and thanks for your time

Regards Ernesto

beets

This isn’t a full answer, but might help you tackle the problem.

What you could try is using the history.state object. So in your homepage, have something like:

<template>
    <q-infinite-scroll 
      @load="onLoad" 
      :initial-index="initial_index"
    >
       ...
    </q-infinite-scroll>
</template>
<script>
export default {
data() {
  return {
    initial_index: 0,
  }
},
beforeMount() {
  if(window.history.state.index) {
    this.initial_index = window.history.state.index
  }
},
methods: {
  onLoad(index, done) {
    // handle your loading
    history.replaceState({
      index
    })
  }
},
}
</script>

Note that I haven’t used infinite scroll in a while, so I forget some of the details of how it works, but I have used the history state before to handle persisted state when using the back button.

ernestocuzcueta

Hi Beets

If I I understook your idea is load the last page for the infinity scroll.
If the user saw:
1
2
3
4
5

6
7
8
9
10

11
12
13
14
15

And he enter in the item 14, when go back the system will show

11
12
13
14
15

and not the original page with the 15 items. It is an interesting idea.

beets

@ernestocuzcueta I think you could even make it load all previous items in the onLoad function, but it’s been a while since I used the infinite scroll. It of course also depends on how expensive the onLoad function is, if you have them stored in vuex then it would be easy of course.

Also, just to make sure, you can enable vue router to scroll to the previous position on history back with this in your router/index.js file:

new Router({
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 }
    }
  };
  // ...
})

But, since the page being pushed may not have that much height because of the lazy loading, you might need to solve it some other way like:

scrollBehavior: (to, from, savedPosition) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
       if (savedPosition) {
         resolve(savedPosition)
       } else {
         resolve({ x: 0, y: 0 })
       } 
    }, 600) // inelegant, but may work
  })
}

Or even better, create a (throttled) scroll observer on the homepage, and save the position in the history.state object along with the index, and scrollTo on mounted / after you have loaded the items.

Edit, there’s even another way in this thread: https://forum.vuejs.org/t/cant-get-scrollbehavior-working/29077/7

You can create a listener that only fires once, and emit that after you load. That being said, I would probably still handle this all in the homepage component with history state if possible.

ernestocuzcueta

Thanks beets for yours ideas and your time, I will try

No More Posting New Topics!

Problem when use History go back