Angular 多个路由器出口的清洁url

我能够在这个路由中使用多个路由器插座

const appRoutes: Routes = [
    { path: '', component: HomeComponent, outlet: 'main' },
    { path: 'product', component: ProductDetailComponent, outlet: 'main' },
    { path: 'chat', component: ChatComponent, outlet: 'chat' }
  ]  ;

和在组件html中

<button
  [routerLink]="['/', {outlets: {'chat': ['chat']}}]">
  Chat
</button>

<button
  [routerLink]="['/', {outlets: {'main': ['product']}}]">
  main
</button>

<router-outlet name="main"></router-outlet>

 <router-outlet name="chat"></router-outlet>

export const AppRouting = RouterModule.forRoot(appRoutes); 

聊天
主要的
export const AppRouting=RouterModule.forRoot（appRoutes）；

正如你在这辆车上看到的那样，它工作得非常好

但是，这些路由的url如下

本地主机：4200/（聊天室：聊天室//主要：产品）

这看起来很脏，我觉得在一个真正的网站上使用不好

---

是否有任何方式清理此url，使其看起来像正常url，并且仍然使用多个路由器出口？如果不是，在真正的网站上使用此类URL可以吗？

您可以使用“skipLocationChange”属性禁用任何路由器链接的路径更改/重写：

 router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

或

点击我

我不确定，您甚至可以使用运行时配置选项完全禁用路径修改。您可以尝试不提供“Location”和“PathLocationStrategy”，但我感觉路由器在没有它的情况下会抛出异常。角度路由器有点让我发疯，所以我开始写一个服务来做我自己的路径管理。这就形成了一种全新的路由器P

---

我不相信另一位评论者所说的是真的。URL栏中的路径只是路由器放在那里的一个值。它不存储任何信息，所有信息都存储在控制服务中。它基本上只是一个输出。您可以随意修改它，只要您确保正确配置您的Web服务器，这样您就不会从非主页获得404的页面刷新。

非常感谢，这正是我想要的！！这是一个问题的解决方案，但需要注意的是，使用

skipLocationChange:true

可以释放由浏览器管理的导航堆栈

<a [routerLink]="..." skipLocationChange>click me</a>