Return to savedPosition when using vue-router inside v-ons-page

[superpikar 0]

Hello,

I have a problem with the implementation of vue-router inside v-ons-page. Following is the use case :

• In the HomePage.vue I have lots of list item, each of them linked to other page
• Scroll the list item, click one of them
• In the PostPage, click the back button on the toolbar
• When returning to the previous page, it always scrolls to the top.

What I want to achieve is when returning to the previous page, it scrolls to the last position as usually vue-router does.

I have created 2 pens to compare the implementation of vue-router in common vue project, and in vue-onsen project. Please check the console.log in the browser, you will notice that on the vue-onsen when the application back to the previous page, it always return to {x: 0, y:0}

• Vue Simple Routing https://codepen.io/superpikar/pen/MBWjxM
• Vue-OnsenUI Simple Routing https://codepen.io/superpikar/pen/gjOzPL

Do anyone have a workaround for this solution?

I will appreciate any help. Thanks

[asialgearoid]

Thanks for the two examples, which made the issue easy to debug. The problem is with Vue Router rather than Onsen UI.

It is caused by the fact that Vue Router only saves the position of the body’s scroll bar. In your working example, the list scrolls the body, but in the second, it scroll’s the page’s content div. Vue Router does not get the scroll from this, and so it is not saved. Take a look at saveScrollPosition in vue-router.js, which is used in your example, and you will see why it does not work.

I guess you will need to save the scroll position yourself some other way. Unfortunately, I am not familiar enough with Vue Router to help you with that.

[superpikar 0]

Thank you @asialgearoid for the insight.

In your working example, the list scrolls the body, but in the second, it scroll’s the page’s content div
…
Take a look at saveScrollPosition in vue-router.js, which is used in your example

Now I understand what vue-router does when handling scrollPosition.

I’ve found the workaround to solve my problem. By listen on element scroll event then saving the element.scrollTop value into a global variable.

PS: I’ve updated the example of Vue-OnsenUI Simple Routing too https://codepen.io/superpikar/pen/gjOzPL :)