"pathMatch": "full" for empty-path route 导致空白视图

Question

我有以下路线：

app-routing.module.ts:

[
    ...
    {
        path: "",
        loadChildren: () => import("./tabs/tabs.module").then(m => m.TabsPageModule),
        // "pathMatch": "full",
    },
    {
        path: "**",
        redirectTo: "",
        "pathMatch": "full",
    },
]

tabs-routing.module.ts:

[
    {
        path: "tabs",
        component: TabsPage,
        children: [
            {
                path: "products",
                loadChildren: () => import("../tab1/tab1.module").then(m => m.Tab1PageModule),
                "pathMatch": "full",
            },
            {
                path: "catalogue",
                loadChildren: () => import("../tab2/tab2.module").then(m => m.Tab2PageModule),
                "pathMatch": "full",
            },
            {
                path: "account",
                loadChildren: () => import("../tab3/tab3.module").then(m => m.Tab3PageModule),
                "pathMatch": "full",
            },
            {
                path: "",
                redirectTo: "products",
                "pathMatch": "full",
            },
        ],
    },
    {
        path: "",
        redirectTo: "tabs",
        "pathMatch": "full",
    },
]

Route.pathMatch 的 documentation 声明：

路径匹配策略“完整”匹配整个 URL。 在重定向空路径路由时这样做很重要。 否则，由于空路径是任何 URL 的前缀，即使导航到重定向目标，路由器也会应用重定向，从而创建无休止的循环。

这就是我尝试过的，在我的应用程序路由模块中将"pathMatch": "full", 添加到我的path: "", （在上面的sn-p 中注释掉的行）。但是，这样做会破坏我的应用程序，我无法弄清楚原因。

localhost:8100/foo 等损坏的路径正确地将我重定向到localhost:8100/tabs/products，但视图完全空白（一个空的离子路由器出口）。我的浏览器控制台（或 IDE 的集成终端）中没有记录任何错误。到目前为止，我的应用程序只是 ionic start 选项卡模板的一个小编辑，我还没有触及任何路由器插座。非常感谢您的帮助。

Answer 1

在 tabs-routing.module.ts 中：

[
{
    path: "tabs",
    component: TabsPage,
    children: [
        {
            path: "products",
            loadChildren: () => import("../tab1/tab1.module").then(m => m.Tab1PageModule)
        },
        {
            path: "catalogue",
            loadChildren: () => import("../tab2/tab2.module").then(m => m.Tab2PageModule)
        },
        {
            path: "account",
            loadChildren: () => import("../tab3/tab3.module").then(m => m.Tab3PageModule)
        },
        {
            path: "",
            redirectTo: "products",
            "pathMatch": "full",
        },
    ],
},
{
    path: "",
    redirectTo: "tabs",
    "pathMatch": "full",
},
]

这对你有用