"pathMatch": "full" для маршрута с пустым путем вызывает пустое представление - PullRequest
Новая
       3

"pathMatch": "full" для маршрута с пустым путем вызывает пустое представление

0 голосов
/ 29 мая 2020

У меня есть следующие маршруты:

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 состояний:

Стратегия совпадения пути 'full' соответствует всему URL-адресу. Это важно сделать при перенаправлении маршрутов с пустым путем. В противном случае, поскольку пустой путь является префиксом любого URL-адреса, маршрутизатор будет применять перенаправление даже при переходе к месту назначения перенаправления, создавая бесконечный l oop.

Вот что я пробовал, добавляя "pathMatch": "full", к моему path: "", в моем модуле маршрутизации приложения (строка, которая закомментирована во фрагменте выше). Однако это приводит к поломке моего приложения, и я не могу понять, почему.

Неработающие пути, такие как localhost:8100/foo, правильно перенаправляют меня на localhost:8100/tabs/products, но представление полностью пустое (пустой выход ионного маршрутизатора) . В моей консоли браузера (или интегрированном терминале IDE) ошибки не регистрируются. Мое приложение пока представляет собой небольшую отредактированную версию шаблона вкладок ionic start, и я не касался каких-либо выходов маршрутизатора. Помощь будет очень признательна.

1 Ответ

0 голосов
/ 29 мая 2020

В 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",
},
]

Это сработает для вас

...