I have a situation where I have links in the middle of a webpage that change the content in a pane below using a nested router setup. My routes related to this issue are structured as follows:
const router = {
mode: 'history',
routes: [
{
path: '/parent',
name: 'ParentComponent',
component: ParentComponent,
children: [
{
path: 'child1',
name: 'Child1',
component: Child1,
},
{
path: 'child2',
name: 'Child2',
component: Child2,
},
],
},
],
}
The problem I'm facing is that when clicking on a link to navigate to a child path, the content jumps back to the top of the page even if it was previously scrolled down. To address this, I attempted to use scrollBehavior to retain the scroll position like so:
router.scrollBehavior = (to, from, savedPosition) => {
console.log('savedPosition: ', savedPosition);
if (savedPosition) {
return savedPosition;
}
return { x: 0, y: 0 };
}
However, I consistently receive a null output for the log. Upon referring to the documentation, it mentions that the savedPosition parameter only holds a value during a popstate navigation event.
Is there a technique to enforce a popstate navigation when clicking on these internal links or is there an alternative method I can utilize to maintain the scroll position upon link click?