在Angular 7中,可以使用Router的NavigationExtras
来导航而不添加到浏览器的历史记录中。
以下是一个示例代码:
import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
constructor(private router: Router) {}
navigateWithoutHistory() {
const navigationExtras: NavigationExtras = {
skipLocationChange: true, // 跳过URL的更改
replaceUrl: false // 不替换URL
};
this.router.navigate(['/target-route'], navigationExtras);
}
}
在上面的示例中,我们创建了一个按钮,并在点击按钮时调用了navigateWithoutHistory
方法。在该方法中,我们使用NavigationExtras
对象配置导航选项,通过设置skipLocationChange
为true
来跳过URL的更改,以及将replaceUrl
设置为false
来不替换URL。然后,我们使用this.router.navigate
方法进行导航,传递目标路由和导航选项。
这样,当我们点击按钮时,将会进行导航,但不会在浏览器的历史记录中添加新的记录。