Angular刷新/重载路由时URL跳转默认路由问题如何解决

两个配置的问题本质都是路由结构和路由出口不匹配、重定向规则优先级错误：

1. 初始配置把根组件AppComponent绑定到了store路径上，但AppComponent本身是承载<router-outlet>的根宿主，不应该作为路由加载组件，会导致路由匹配层级混乱，刷新时路由初始化无法正确命中当前路径，直接 fallback 到最近的空路径重定向规则，跳回默认public页。
2. 调整后的嵌套路由配置失效，是因为Angular的嵌套路由规则要求：配置了children的父级路由，其对应的组件模板内必须存在一个<router-outlet>用于挂载子路由组件。你把softwares、:id都设为public路径对应HomeComponent的子路由，但HomeComponent里没有对应嵌套出口，自然无法渲染组件。
3. 你配置的onSameUrlNavigation: 'reload'只作用于当前URL和目标URL完全一致时的导航触发逻辑，和刷新页面时的路由初始化匹配流程无关，所以靠这个配置没法解决刷新跳转的问题。

1. 修正基础路由配置 #

不要把AppComponent加入路由表的component配置，调整重定向规则的作用范围，补充路由初始化相关配置避免误重定向：

const routes: Routes = [
  {
    path: 'store',
    children: [
      { path: 'public', component: HomeComponent, data: { defaultSelectedTab: 0 } },
      { path: 'public/softwares', component: HomeComponent, data: { selectedValue: 'softwares', defaultSelectedTab: 0 } },
      { path: 'public/softwares/:id', component: SoftwareDetailsComponent },
      // 仅当路径完全匹配/store 空后缀时触发重定向，不会干扰子路径匹配
      { path: '', redirectTo: 'public', pathMatch: 'full' },
    ]
  },
  // 根路径全局重定向
  { path: '', redirectTo: '/store/public', pathMatch: 'full' },
  { path: '**', component: EmptyComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      onSameUrlNavigation: 'reload',
      // 开启计算式导航解析，避免初始化阶段路径匹配错误触发强制跳转
      canceledNavigationResolution: 'computed'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 兜底处理刷新时的路径保留 #

如果改完基础配置后仍存在偶发刷新跳转，在AppComponent中加一段首次导航拦截逻辑，强制对齐地址栏当前路径：

import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';

export class AppComponent {
  constructor(private router: Router) {
    // 应用初始化时先读取地址栏当前hash路径
    const currentPath = window.location.hash.slice(1) || '/store/public';
    // 仅监听应用启动后的第一次导航事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationStart && event.id === 1)
    ).subscribe((event: NavigationStart) => {
      // 如果首次导航目标和当前地址栏路径不一致，替换为当前路径，不新增历史记录
      if (event.url !== currentPath) {
        this.router.navigateByUrl(currentPath, { replaceUrl: true });
      }
    });
  }
}

3. 嵌套路由配置注意事项 #

如果后续确实需要把softwares、详情页调整为public的子路由，必须在public对应的HomeComponent模板内添加一个<router-outlet>标签作为子路由的挂载出口，否则嵌套路由永远无法正常渲染。如果HomeComponent没有预留嵌套组件的渲染位置，保持同层级路由配置即可，不需要强行做路由嵌套。

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