Angular 9，我如何更改路由器优先级，以便商店在回家之前先显示？

Question

我想让用户在看到首页之前先看看商店，所以我需要在app-routing-module中做些什么才能让它工作，这是我到目前为止所做的。app-routing-module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, data: { breadcrumb: 'Home' } },
  { path: 'test-error', component: TestErrorComponent, data: { breadcrumb: 'Test Errors' } },
  { path: 'server-error', component: ServerErrorComponent, data: { breadcrumb: 'Server Error' } },
  { path: 'not-found', component: NotFoundComponent, data: { breadcrumb: 'Not Found' } },
  { path: 'shop', loadChildren: () => import('./shop/shop.module').then(mod => mod.ShopModule), data: { breadcrumb: 'Shop' } },
  { path: 'basket', loadChildren: () => import('./basket/basket.module').then(mod => mod.BasketModule), data: { breadcrumb: 'Basket' } },
  {
    path: 'checkout',
    canActivate: [AuthGuard],
    loadChildren: () => import('./checkout/checkout.module')
      .then(mod => mod.CheckoutModule), data: { breadcrumb: 'Checkout' }
  },
  {
    path: 'orders',
    canActivate: [AuthGuard],
    loadChildren: () => import('./orders/orders.module')
      .then(mod => mod.OrdersModule), data: { breadcrumb: 'Orders' }
  },
  {
    path: 'account',
    loadChildren: () => import('./account/account.module')
      .then(mod => mod.AccountModule), data: { breadcrumb: { skip: true } }
  },
  {
    path: 'admin',
    canActivate: [AuthGuard, AdminGuard],
    loadChildren: () => import('./admin/admin.module')
      .then(mod => mod.AdminModule), data: { breadcrumb: 'Admin' }
  },
  { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

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

Answer 1

const routes: Routes = [
  ==>{ path: '', redirectTo: 'shop', pathMatch: 'full'},
  ==>{ path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } },
  { path: 'test-error', component: TestErrorComponent, data: { breadcrumb: 
    'Test Errors' } },
  { path: 'server-error', component: ServerErrorComponent, data: { breadcrumb: 
    'Server Error' } },
  { path: 'not-found', component: NotFoundComponent, data: { breadcrumb: 'Not 
    Found' } },
  { path: 'shop', loadChildren: () => import('./shop/shop.module').then(mod => 
    mod.ShopModule), data: { breadcrumb: 'Shop' } },
  { path: 'basket', loadChildren: () => 
    import('./basket/basket.module').then(mod => mod.BasketModule), data: { 
    breadcrumb: 'Basket' } },
  { path: 'checkout',
    canActivate: [AuthGuard],
    loadChildren: () => import('./checkout/checkout.module')
    .then(mod => mod.CheckoutModule), data: { breadcrumb: 'Checkout' }
  },
  { path: 'orders',
    canActivate: [AuthGuard],
    loadChildren: () => import('./orders/orders.module')
    .then(mod => mod.OrdersModule), data: { breadcrumb: 'Orders' }
  },
  { path: 'account',
    loadChildren: () => import('./account/account.module')
    .then(mod => mod.AccountModule), data: { breadcrumb: { skip: true } }
  },
  { path: 'admin',
    canActivate: [AuthGuard, AdminGuard],
    loadChildren: () => import('./admin/admin.module')
    .then(mod => mod.AdminModule), data: { breadcrumb: 'Admin' }
  },
  { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

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

您可以在代码中添加类似以下(shown with ==>)的额外配置，以便首先向用户显示ShopPage，然后根据您的重定向逻辑将他带到HomePage。