In pagelayout ‘A’ I have invoked one API and the data from the API is needed for all the pages comes under the pagelayout ‘A’, And these data were stored in the Local storage for further access.
Problem: When I redirect the user from login page to the main page for the first time, The API function is delayed on the layout and the Pages are invoked before the API call gets complete, So I am getting the null/undefined values on the pages

Case
{
path: ‘/blog/best-practices/:param1/:param2/:param3’,
name: ‘blog’,
component: () => import(‘layouts/AppLayout.vue’),
children: [
{ path: ‘’, component: () => import(‘pages/app/papers.vue’) }
]
}

After successful Authentication on the login page, I am navigating the user to papers.vue page by calling the named Router.push in login.vue

this.$router.push({ name: ‘blog’, params: { param1: ‘val1’, param2: ‘val2’, param3: ‘val3’ } })

issue
Child layout ( paper.vue ) is not loading in the AppLayout.vue