Angular详情页浏览器回退路径异常问题求助

这个问题的根源很明显——你跳转详情页的路由导航代码写错了，导致浏览器历史栈里存了错误的路径，所以点击回退才会跳到/categories/categories。下面给你几个直接可行的解决方案：

方案1：修正绝对路径导航（最根本的解决方式） #

你当前使用的this.router.navigate([getLocaleFromStorage(), category.id]);缺少了categories这个关键路由段，导致生成的路径不符合预期。正确的绝对路径导航应该补全完整的路由结构：

// 生成 `${locale}/categories/:id` 格式的正确路径
this.router.navigate([getLocaleFromStorage(), 'categories', category.id]);

这样不管当前页面处于哪个路由层级，都会直接跳转到正确的详情页路径，历史栈里的记录会变成${locale}/categories → ${locale}/categories/:id，点击回退自然就回到分类列表页了。

方案2：使用相对路径导航（更简洁灵活） #

如果你是在CategoriesComponent内部触发跳转，可以利用相对当前路由的方式导航，不用重复写locale和categories：
首先在组件中注入ActivatedRoute：

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

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute
) {}

然后修改导航代码：

// 相对于当前激活的路由（即 `${locale}/categories`）跳转至子路由
this.router.navigate([category.id], { relativeTo: this.activatedRoute });

这种方式更灵活，就算以后路由结构调整，只要详情页保持是列表页的子路由，代码都不用改动。

方案3：模板中直接用routerLink（最省事） #

如果是通过页面元素点击跳转，直接用Angular的routerLink指令更简单，它默认支持相对路径：

<!-- 相对于当前路由跳转到对应分类详情页 -->
<button [routerLink]="[category.id]">查看分类详情</button>

这种方式不需要写组件逻辑，Angular会自动处理正确的路由路径和历史栈记录。

补充：补救错误历史记录（可选） #

如果之前的错误导航已经在历史栈里留下了脏数据，你可以在进入详情页时替换当前历史记录，避免回退到错误路径：

// 用replaceUrl替换当前历史记录，而非新增记录
this.router.navigate([getLocaleFromStorage(), 'categories', category.id], { replaceUrl: true });

不过这只是补救措施，最核心的还是先把导航代码改对，从根源上避免错误。

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