如何修复子路由？答案

【问题标题】：How to fix the children routing?如何修复子路由？
【发布时间】：2021-02-01 11:15:58
【问题描述】：

当我点击带有 [routerLink] 的按钮时，URL 正在改变，但是！页面保留在相同的组件中 - 登录组件。我能做些什么来解决它？

APP ROUTING MODULE:

  
const routes: Routes = [
  { path: "", redirectTo: "/login", pathMatch: "full" },
  {
    path: "login", component: LoginComponent, children:
      [{ path: "admin", component: AdminComponent },
      { path: "company", component: CompanyComponent },
      { path: "customer", component: CustomerComponent }]
  }
];

LOGIN COMPONENT HTML:

<div class="row center">
          <div class="col-4">
                    <button style="height: 250px; width:100% ;"
                            [routerLink]="['admin']">Admin</button>
          </div>
          <div class="col-4">
                    <button style="height: 250px; width:100% ;"
                            [routerLink]="['company']">Company</button>
          </div>
          <div class="col-4">
                    <button style="height: 250px; width:100% ;"
                            [routerLink]="['customer']">Customer</button>
          </div>
</div>





APP.COMPONENT.HTML:

<div class="container">
  <div class="row">
    <div class="col-12">
     <router-outlet></router-outlet>
    </div>
  </div>
</div>

请帮忙！

【问题讨论】：

您还需要在子数组路由中指定空白路径 - { path: '', redirectTo: 'overview', pathMatch: 'full' } 像这样......在你的情况下何时重定向当空白编辑它。试试这个...希望它有帮助。
我加了没用...

标签： javascript html angular routes

【解决方案1】：

您可以像用户路由器链接一样

<button style="height: 250px; width:100% ;"
                            [routerLink]="['/login/admin']">Admin</button>

希望对你有用

【讨论】：

【解决方案2】：

像这样试试。

<div class="col-4">
        <button style="height: 250px; width:100% ;" [routerLink]="['/login', 'admin']">Admin</button>
    </div>

【讨论】：

不......仍然......页面在同一个组件中（只有url在改变）