Vue Router页面刷新自动重定向至路由根路径问题求助

问题核心原因 #

1. 导航守卫未完成异步导航确认：你的beforeEach是异步函数，但未明确调用导航放行逻辑，Vue Router因无法确认导航状态，触发了意外重定向。
2. 路由路径末尾斜杠匹配歧义：路由配置中部分路径带末尾斜杠（如/new/:itemId/），但实际访问路径可能不带，导致路由匹配逻辑冲突。

修复步骤 #

1. 修正导航守卫的异步逻辑 #

修改beforeEach代码，确保异步加载布局组件后调用next()放行导航：

router.beforeEach(async function (to, from, next) {
    const layoutComponent = await import(`./layouts/${to.meta.layout}.js`);
    to.meta.layout = layoutComponent.default;
    next(); // 必须调用此方法确认导航继续
});

原代码缺少next()参数与调用，异步导航守卫必须明确告知Vue Router是否允许路由跳转。

2. 统一路由路径格式（可选） #

为避免路径匹配歧义，统一所有路由路径的末尾斜杠规则（全部带或全部不带），示例为全部去掉末尾斜杠：

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'
            }
        }
    ]
});

同步更新.NET Core的重写规则，匹配修改后的路径：

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);

3. 简化.NET Core SPA路由处理（可选） #

可以用官方SPA路由回退替代手动重写规则，更简洁可靠：

// 在UseStaticFiles之后添加
app.MapFallbackToFile("index.html");

验证修复 #

修改完成后，刷新localhost:5000/new/123456或/active/123456路径，确认组件正常渲染且不会被重定向到对应根路径。

内容的提问来源于stack exchange，提问作者Nosai