Vue Router：页面刷新时自动重定向到路由器的根路径

Question

我的 Vue 应用程序遇到问题，路由器自动将自身重定向到当前路径的根目录。比如说，我在路径

localhost:5000/new/123456

上，当我刷新页面时，我被重定向到

localhost:5000/new/

。所有路线都会发生这种情况。我在

/active/

上有另一条路线，如果我在

/active/123456

上刷新，该路线将被重定向到。

代码确实到达了正确路径的组件生命周期方法（例如

mounted()

），但重定向会立即发生。

路由器：

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

我运行

beforeEach

根据路线布局属性正确设置布局组件。如果它可能相关，这是代码：

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

编辑：我正在使用静态文件在 .NET Core 项目中运行 Vue。我不确定，但它“可能”与该问题相关。这是我的 Startup.cs 配置方法中的代码：

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

Answer 1

selectedList

的观察程序属性（绑定到我的应用程序底部的导航按钮）导致了该问题。

当通过

mounted

方法加载组件时，应用程序会将

selectedList

的值设置为另一个值。这将触发属性观察程序中的处理程序，将 URL 推送到路由器，从而将其导航到不同的 URL。