我刚刚将 Angular 应用程序作为静态 Web 应用程序部署到 Azure 中。
当我尝试在视图之间导航时，通过链接导航时出现 404 错误，但通过角度/路由器导航工作正常。在本地，这两种方法都有效，只有在部署到 Azure 后才会出现问题。我已尝试解决此处描述的问题，但这对我不起作用。
例如：
app.component.ts
import { Router } from '@angular/router';
...
goToNews(): void {
this.router.navigate(['/news'])
}
app.component.html
<a class="nav-link" (click)="goToNews()">News</a> <!-- works -->
<a class="nav-link" href="/news">News</a> <!-- does not work -->
第一个链接工作正常，但第二个链接没有。在 url 中键入视图的路由也会导致 404 错误。
有谁知道，为什么会发生这种情况或如何解决？
谢谢 ：）
问题在于 anker 元素的 href 不知道您的 Angular 路由器。使用角度路由器的正确方法是使用 routerLink 指令：
<a routerLink="/news">News</a>
您还可以使用相对路径或使用 href 的完整路径：
<a href="https://angular-ivy-7dotr6.stackblitz.io/other">Other</a> | <!-- BAD PRACTICE-->
<a href="../home">Home2</a> <!-- BAD PRACTICE-->
但是，通过这样做，您并没有使用角度路由器，并且浏览器看起来会令人耳目一新。这是一个不好的做法，但我将它包含在Stackblitz上的一个示例中，以便您查看差异并了解发生了什么。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句