如何在 Angular 中更新上一页 URL

Question

问题：如何url从历史记录中删除以前的路线，以便浏览器“返回”按钮跳过它？

在我的应用程序中，如果数据无效或其他问题 -Angular执行重定向到错误页面。但是如果在浏览器中按下“返回”按钮 - 用户会再次被重定向到错误页面并从那里重定向到错误页面。所以这是一种无休止的循环。

这个想法是url从历史记录中删除以前的（带有无效数据的），因此以前的重定向会导致之前的页面url带有无效数据。

我们browser.location在 vanilla 中有一些api JS，但是如何做到这Angular一点呢？

更新：有很多方法可以获取上一个 url，例如：如何在 Angular 中确定上一个页面的 URL？. 但是怎么设置呢？

解决方案：我尝试使用Angular Location.replaceState()来覆盖历史记录。出于某种原因，它只是删除了一个历史条目而没有替换它：https : //angular.io/api/common/Location#replaceState 类似的行为发生在vanilla JS History.replaceState()：https : //developer.mozilla.org/en-US/docs/Web /API/历史/replaceState

我最终改变设计，使用skipLocationChange: true在NavigationExtras： https://angular.io/api/router/NavigationExtras 所以巴林特Réthy的答案最适合。

Answer 1

您需要使用导航选项。当您收到导航到错误页面的错误时，应该使用NavigationExtras来实现。您可以在那里定义skipLocationChange或replaceUrl。skipLocationChange 在导航更改时跳过以将状态推送到历史记录replaceUrl 重新定义历史中的当前状态代码应如下所示：this.router.navigate(['/error'], { replaceUrl: true });文档参考：https : //angular.io/api/router/NavigationExtras

Answer 2

Angular 路由保护 CanActivate 方法将帮助您解决我们的问题，当用户导航或尝试从一个屏幕导航到另一个屏幕时它会触发。它还将为您提供可以根据您的要求轻松操作的下一个 url 路由。您只需在提供程序中包含路由保护并实现 CanActivate 路由保护。step 1-实现CanActivate接口import { Injectable } from '@angular/core';import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';@Injectable({  providedIn: 'root',})export class AuthGuard implements CanActivate {  canActivate(    next: ActivatedRouteSnapshot,    state: RouterStateSnapshot): boolean {    // here you can write you logic example-> you can navigate to some where else protect navigation    console.log('AuthGuard#canActivate called');    return true;  }}第 2 步 -> 告诉你的路由表你有一个守卫来保护你的路由：P import { AuthGuard }  from '../auth/auth.guard';    const adminRoutes: Routes = [    { path: 'crises', component: ManageCrisesComponent },    { path: 'admin',  component: AdminComponent, canActivate: [AuthGuard]} // -->your Auth guard will get register here     ];

Answer 3

对我来说，后退按钮是浏览器和用户的问题。我将解释我自己，如果用户想回去，你应该让他们回去，这对我来说是正确的方式，通常的流程以及应该如何完成。但为了实现这一点，您可以这样做：在您的错误页面中，您可以使用 history.pushState 文档：https : //developer.mozilla.org/en-US/docs/Web/API/History/pushState  history.pushState(null, null, window.location.href);