Angular 14如何回退URL？尝试route.navigate(['..'])无效果

你遇到的route.navigate(['..'])无效且返回旧内容的问题，通常是相对路由解析配置缺失或路由复用策略导致的组件未刷新，以下是几种可行的解决方法：

1. 使用绝对路径直接跳转 #

放弃相对路径，直接指定目标路由的绝对路径，这种方式最直观且不易出错：

this.route.navigate(['/a/b']);

2. 正确配置相对路由的relativeTo参数 #

使用相对路径时，必须传入当前激活的路由实例作为relativeTo参数，否则路由无法正确解析父路径：

import { ActivatedRoute } from '@angular/router';

// 确保已在组件构造函数中注入ActivatedRoute
constructor(private route: ActivatedRoute) {}

// 跳转代码
this.route.navigate(['..'], { relativeTo: this.route });

3. 解决旧内容不刷新的问题 #

如果跳转后显示旧内容，大概率是Angular的路由复用策略导致组件未重新初始化，可通过以下方式处理：

• 全局配置路由复用策略：在路由模块的RouterModule.forRoot()中添加onSameUrlNavigation: 'reload'：

RouterModule.forRoot(routes, {
  onSameUrlNavigation: 'reload'
})

• 跳转时强制刷新：在navigate方法中添加配置项：

this.route.navigate(['/a/b'], { onSameUrlNavigation: 'reload' });

• 组件内监听路由变化：在目标组件（a/b对应的组件）中订阅路由参数变化，触发数据刷新：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

private routeSub: Subscription;

ngOnInit(): void {
  this.routeSub = this.route.params.subscribe(() => {
    // 这里调用你的数据加载或组件刷新逻辑
    this.loadData();
  });
}

ngOnDestroy(): void {
  this.routeSub.unsubscribe();
}

内容的提问来源于stack exchange，提问作者RockyCott