Angular 9、如何更改路由器的优先级，让店铺先显示后回家？

Question

我希望用户在看到主页之前先看到商店，所以我需要在 app-routing-module 中更改什么才能使其正常工作，这是我目前所做的。应用程序路由-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你的重定向逻辑。

Angular 9、如何更改路由器的优先级，让店铺先显示后回家？

Angular 9, how do I change router priority so that shop display first before home?

routes

typescript

angular-ui-router

angular