离子路由无法匹配任何路由

时间:2020-05-30 05:44:07

标签: angular ionic-framework ionic4

我在我的应用程序中使用路由,并且在应用程序中工作正常,然后我需要添加一个页面,该页面也可以工作,但是当我设置为该页面的root时,它会显示

Error: Cannot match any routes URL Segment: 'tabs/categories'

App.routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OrderSummaryPage } from './checkout/order-summary/order-summary.page';
import { StartPage } from '../app/start/start.page';

const routes: Routes = [
    { path: '', component: StartPage },
    { path: 'cat', loadChildren: './tabs/tabs.module#TabsPageModule', },
    { path: 'order-summary/:id', component: OrderSummaryPage },

];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

如果删除cat并完美地将其加载选项卡页面设置为第一条路线,则可以正常工作,但是我需要先显示开始页面,然后再设置该选项卡页面。我已经做到了,但是显示错误

我只是这样设置路线

<div class="content" routerLink="/cat" routerDirection="root"><img id="myImage" src="assets/image/logo.png"></div>

这是我的tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            component: HomePage,
          },
          {
            path: 'products/:id',
            children: [
              {
                path: '',
                component: ProductsPage
              },
              {
                path: 'product/:id',
                children: [
                  {
                    path: '',
                    component: ProductPage
                  },
                  {
                    path: 'review/:id',
                    component: ReviewPage
                  }
                ]
              }
            ]
          },
          {
            path: 'product/:id',
            children: [
              {
                path: '',
                component: ProductPage
              },
              {
                path: 'review/:id',
                component: ReviewPage
              }
            ]
          },
          {
            path: 'vendor-products',
            children: [
              {
                path: '',
                component: ProductsPage
              },
              {
                path: 'product/:id',
                children: [
                  {
                    path: '',
                    component: ProductPage
                  },
                  {
                    path: 'review/:id',
                    component: ReviewPage
                  }
                ]
              }
            ]
          },
          {
            path: 'post/:id',
            component: PostPage
          }
        ]
      },
      {
        path: 'categories',
        children: [
          {
            path: '',
            component: CategoriesPage
          },
          {
            path: 'products/:id',
            children: [
              {
                path: '',
                component: ProductsPage
              },
              {
                path: 'product/:id',
                children: [
                  {
                    path: '',
                    component: ProductPage
                  },
                  {
                    path: 'review/:id',
                    component: ReviewPage
                  }
                ]
              }
            ]
          },
          {
            path: 'vendor-products',
            children: [
              {
                path: '',
                component: ProductsPage
              },
              {
                path: 'product/:id',
                children: [
                  {
                    path: '',
                    component: ProductPage
                  },
                  {
                    path: 'review/:id',
                    component: ReviewPage
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        path: 'search',
        children: [
          {
            path: '',
            component: SearchPage
          },
          {
            path: 'product/:id',
            children: [
              {
                path: '',
                component: ProductPage
              },
              {
                path: 'review/:id',
                component: ReviewPage
              }
            ]
          },
          {
            path: 'vendor-products',
            children: [
              {
                path: '',
                component: ProductsPage
              },
              {
                path: 'product/:id',
                children: [
                  {
                    path: '',
                    component: ProductsPage
                  },
                  {
                    path: 'review/:id',
                    component: ReviewPage
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        path: 'cart',
        children: [
          {
            path: '',
            component: CartPage
          },
          {
            path: 'address',
            component: CheckoutAddressPage
          },
          {
            path: 'checkout',
            component: CheckoutPage
          },
          {
            path: 'product/:id',
            children: [
              {
                path: '',
                component: ProductPage
              },
              {
                path: 'review/:id',
                component: ReviewPage
              }
            ]
          }
        ]
      },
      {
        path: 'account',
        children: [
          {
            path: '',
            component: AccountPage
          },
          {
            path: 'address',
            children: [
              {
                path: '',
                component: AddressPage
              },
              {
                path: 'edit-address',
                component:EditAddressPage
              }
            ]
          },
          {
          path: 'register',
            component: RegisterPage
          },
          {
          path: 'points',
            component: PointsPage
          },
          {
            path: 'setting',
            component: SettingPage
          },
          {
            path: 'currencies',
            component: CurrenciesPage
          },
          {
            path: 'wallet',
            children: [
              {
                path: '',
                component: WalletPage
              },
              {
                path: 'cart',
                component: CartPage
              }
            ]
          },
          {
            path: 'post/:id',
            component: PostPage
          },
          {
            path: 'map',
            component: MapPage
          },
          {
            path: 'orders',
            children: [
              {
                path: '',
                component: OrdersPage
              },
              {
                path: 'order/:id',
                component: OrderPage
              }
            ]
          },
          {
            path: 'login',
            children: [
              {
                path: '',
                component: LoginPage
              },
              {
                path: 'forgotten',
                component: ForgottenPage
              }
            ]
          },
          {
            path: 'wishlist',
            children: [
              {
                path: '',
                component: WishlistPage
              },
              {
                path: 'product/:id',
                children: [
                  {
                    path: '',
                    component: ProductPage
                  },
                  {
                    path: 'review/:id',
                    component: ReviewPage
                  }
                ]
              }
            ]
          },
          {
            path: 'blogs',
            children: [
              {
                path: '',
                component: BlogsPage
              },
              {
                path: 'blog/:id',
                component: BlogPage
              }
            ]
          },
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/categories',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/categories',
    pathMatch: 'full'
  }
];

0 个答案:

没有答案