I have a problem in my Vue app where the router automatically redirects itself to the root of the current path. Say, I am on the path localhost:5000/new/123456 and when I refresh the page, I am redirected to localhost:5000/new/. This happens for all routes. I have another route on /active/ that is being redirected to if I refresh on /active/123456.

The code does reach the component’s lifecycle methods (e.g mounted()) of the correct path, but the redirection occurs instantly after.

Router:

const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes : [
        {
            path: '/new/:itemId/',
            component: ServiceDetail,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/new/',
            component: ServiceOverviewNew,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/active/:itemId/checklist',
            component: CompleteServiceQuestionnaire,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/active/:itemId/',
            component: ServiceDetail,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/active/',
            component: ServiceOverviewActive,
            meta: {
                layout: 'Default'
            }
        }
    ]
});

I run a beforeEach to correctly set the layout component according to the routes layout property. If it may ever be relevant, this is the code for that:

router.beforeEach(async function (route) {
    const layoutComponent = await import(`./layouts/${route.meta.layout}.js`);
    route.meta.layout = layoutComponent.default;
});