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;
});
Edit: I am running Vue in a .NET Core project using static files. I am unsure, but it may be relevant to the issue. Here is the code in my Startup.cs Configure method:
DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
defaultFilesOptions.DefaultFileNames.Clear();
defaultFilesOptions.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(defaultFilesOptions);
RewriteOptions options = new RewriteOptions()
.AddRewrite(@"^new/$", "index.html", true)
.AddRewrite(@"^new/(d+)/$", "index.html", true)
.AddRewrite(@"^active/$", "index.html", true)
.AddRewrite(@"^active/(d+)/$", "index.html", true)
.AddRewrite(@"^active/(d+)/checklist/$", "index.html", true);
app.UseRewriter(options);
//Adding Static Files Middleware to serve the static files
app.UseStaticFiles();