Angular Router命名路由出口URL优化及刷新问题咨询

方案1：将命名路由改为子路由，实现常规URL格式 #

如果不需要同时显示多个路由内容（即单出口场景），可以放弃命名路由出口，改用子路由结构，这样URL会变成你想要的https://localhost/project/19/project-details，同时解决刷新跳转问题：

• 修改路由配置
  将原命名出口的路由配置，调整为父路由的子路由：

  const routes: Routes = [
    { 
      path: 'project/:id', 
      component: ProjectComponent, 
      children: [
        { path: '', component: ProjectDefaultComponent }, // 父路由默认显示组件
        { path: 'project-details', component: ProjectDetailsComponent } // 去掉outlet配置
      ]
    }
  ];
  

• 调整组件内的路由出口
  在ProjectComponent模板中，使用普通的无命名路由出口：

  <router-outlet></router-outlet>
  

• 修改导航代码
  导航时直接指向子路由路径：

  this.router.navigate(['/project', projectId, 'project-details']);
  

  此时地址栏URL会显示为/project/19/project-details，刷新页面时路由会正确匹配子路由，不会跳转到主路由默认路径。

方案2：保留命名出口，隐藏URL中的命名路由部分 #

如果必须保留命名路由出口（比如页面存在多个并行路由出口），可以通过以下两种方式处理：

方式A：导航时不更新URL #

使用skipLocationChange参数，导航时地址栏URL保持为/project/19，不显示project-details：

this.router.navigate(
  [{ outlets: { projectEditorRouter: ['project-details'] } }],
  { 
    relativeTo: this.route, // 基于当前路由导航
    skipLocationChange: true // 不修改地址栏URL
  }
);

方式B：配置命名出口默认组件，解决刷新跳转问题 #

如果需要保留URL的命名路由格式但解决刷新跳转，可以给命名出口设置默认组件，这样刷新时会自动加载目标组件：

const routes: Routes = [
  { 
    path: 'project/:id', 
    component: ProjectComponent, 
    children: [
      { path: '', component: ProjectDefaultComponent },
      // 给命名出口设置默认路径
      { path: '', component: ProjectDetailsComponent, outlet: 'projectEditorRouter' }
    ]
  }
];

此时刷新https://localhost/project/19/(projectEditorRouter:project-details)时，命名出口会加载默认的ProjectDetailsComponent，不会跳转到主路由。

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