Angular 总是在页面重新加载时重定向到默认路径答案

【问题标题】：Angular always re-directs to default path on page reloadAngular 总是在页面重新加载时重定向到默认路径
【发布时间】：2020-03-02 23:22:00
【问题描述】：

我一直在使用 Angular 开发一个新应用程序，并且在重新加载时，该应用程序总是加载默认路径。

这是我在 App 模块中的路由数组。

const routes: Route[] =[
  {
    path: "products",
    loadChildren: "./products/products.module#ProductsModule"
  }
  ,{
    path: "books",
    loadChildren: "./books/books.module#BooksModule"
  }
  ,{
    path: "clocks",
    loadChildren: "./clocks/clocks.module#ClocksModule"
  }
  ,{
    path: "",
    redirectTo: "products",
    pathMatch: "full"
  }
];

我的三个模块是产品、书籍和时钟。

在第一次加载应用程序时，我们的 URL 是 localhost:4200/products。（正如预期的那样）。然后我使用导航栏导航到 localhost:4200/products。

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" routerLink="products" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="books" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="clocks" routerLinkActive="active">Clocks</a>
  </li>
</ul>

点击从路径 localhost:4200/books 重新加载时，它总是加载 localhost:4200/products，默认 URL。但是我们知道必须加载 URL localhost:4200/books。

我浏览过各种角度链接和 Angular IO 网站，但我无法弄清楚这一点。

非常感谢这里的任何帮助。

【问题讨论】：

通常对于默认路径，使用通配符，例如{ path: '**', redirectTo: 'products' }。这就是说，“如果没有匹配的补丁，请转到'产品'”。

标签： angular angular-ui-router angular8

【解决方案1】：

你可以试试：

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" routerLink="/products" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/books" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/clocks" routerLinkActive="active">Clocks</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

您为 routerLink 提供了错误的输入！试试这个。

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/products']" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/books']" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/clocks']" routerLinkActive="active">Clocks</a>
  </li>
</ul>

这应该可行。

【讨论】：

【解决方案3】：

感谢您的宝贵意见和反馈。我在问题中提供的路线和链接工作正常。

我犯的错误是我在加载的第一个组件的 ngOnInit() 中添加了 this.router.navigateByUrl()。这导致了问题。

再次感谢大家的投入。

【讨论】：

【解决方案4】：

我相信问题出在您的链接上。没有飞溅。

试试这个方法：

<a class="nav-link" routerLink="/books" routerLinkActive="active">Books</a>

【讨论】：