使用 Angular 跳过浏览器历史记录中的 link 2

Question

我使用 Angular 2 (v2.4.4) 并使用 routerLink 在组件之间导航。

这工作正常，但如果我使用完全相同的快照参数 (active.snapshot.params) 加载保存组件，页面将不会再次加载。因此，例如，如果我在 /page/56 上，然后单击此处指向 /page/56 的 link，完全相同的 link（来自菜单或其他内容），组件不会重新加载。（自上次加载以来，数据库中的内容可能会发生变化，因此需要重新加载页面。）

我通过指向 /jump/page/56 绕过了它，404 页 控制器重定向到 /page/56.

这也可以正常工作，但如果我在浏览器中从 /page/56 导航回来，它将到达 /jump/page/56，然后由 页面指向 /page/56 404 控制器。所以基本上我无法返回。

据我所知，我无法通过 HTML5 历史记录 API 删除浏览器历史记录，但我怎么能回到 /page/56 之前的页面，只需单击浏览器的后退按钮即可？

解决方案可能是一个简单的 JavaScript 技巧，独立于 Angular 2，因为它实际上并不加载新页面，只是加载不同的组件并更改 URL。（也是因为这个我不应该使用 location.reload() 因为它会重新加载 Angular 2 和所有依赖的 JS 等）

提前感谢您的解决方案！

Answer 1

似乎唯一的方法是创建您自己的继承自 [routerLink] 的指令来控制点击处理程序，或者仅将点击处理程序添加到当前元素并自行管理刷新。

 <a (click)="navigate(['/jump/page/56'])">Navigate</a>

哪里

navigate(route) {
  this.router.navigate(route, {replaceUrl: true});
}

Answer 2

您可以使用 skipLocationChange Like :

this.router.navigate(['/jump/page/12'],{skipLocationChange:true});

使用 Angular 跳过浏览器历史记录中的 link 2

Skip jump link in browser's history using Angular 2

javascript

browser-history

html5-history

angular