Question

我的一个设置模块中有多个选项卡，而这些选项卡还具有嵌套的选项卡。我不想重复代码，所以我在其中创建了一个路由文件。

const routes: Routes = [
  {
    path: '',
    component: SettingsComponent,
    children: [
      {
        path: '',
        redirectTo: 'my-account',
        pathMatch: 'full',
        component: MyAccountComponent
      },
      { path: 'my-account', component: MyAccountComponent },
      { path: 'apps', component: AppsComponent }
    ]
  }
];

这是setting.html的代码

<div class="AnalyticsBody">

  <ul class="nav nav-tabs pt-1" id="myTab" role="tablist">
    <li class="nav-item" (click)="goToMyAccount()">
      <a class="nav-link active font14 pb-2 mr-4" id="myaccount-tab" data-toggle="tab" href="#myAccount" role="tab"
        aria-controls="myAccount" aria-selected="true">My Account</a>
    </li>
    <li class="nav-item" (click)="gotToApps()">

      <a class="nav-link font14 pb-2 mr-4" id="apps-tab" data-toggle="tab" href="#apps" role="tab" aria-controls="apps"
        aria-selected="false">Apps</a>

    </li>

  </ul>
  <div class="tab-content grey-bg settings" id="myTabContent">
    <div class="tab-pane fade show active" id="myAccount" role="tabpanel" aria-labelledby="myAccount">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

因此，当url为setting时，我的settingComponent将加载具有我的标签页布局的文件，并将重定向到setting/my-account，其中包含内容。除非我转到setting/apps然后刷新，然后看到setting/apps的内容，否则我会看到setting/my-account的内容，它将起作用我该如何解决？

Answer 1

最后移动“默认”路线。它们将按顺序处理。

const routes: Routes = [
{
  path: '',
  component: SettingsComponent,
  children: [      
    { path: 'my-account', component: MyAccountComponent },
    { path: 'apps', component: AppsComponent },
    {
      path: '',
      redirectTo: 'my-account',
      pathMatch: 'full',
      component: MyAccountComponent
    },
  ]
 }
];

刷新后内容与路由不匹配

1 个答案: