我正在一个项目中使用 Angular 4。我对 Angular 没有太多经验，我应该修复一个错误。我认为这很容易，但是当我加载应用程序并获取 /home 路由时，如果我单击刷新按钮，则会在 URL 中附加另一个 /home。
我的RouterModule 配置如下所示：
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
/* other paths mapping to components */
{ path: '**', redirectTo: 'home' }
])
对新手有什么想法吗？
【问题讨论】：
标签： angular angular-router angular4-router
我无法在StackBlitz 中重现此内容。下面的 gif 显示了您的配置如何按预期工作：
请enableTracing 并发布结果，以便我为您提供更多帮助：
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- insert this here
)
一种解决方案是使用绝对重定向 (redirectTo: '/home')。然而，正如 Viktor Savkin 在他的 blog post 中所说：
本地重定向用不同的 URL 段替换单个 URL 段。绝对重定向会替换整个 URL。
但是由于您在这里使用本地重定向，例如redirectTo: 'home'，它应该再次将当前路径“home”替换为“home”，而不是附加它。这个错误是否只发生在生产或开发中？
【讨论】：
home/home，它似乎仍然会到达相同的路径 ''。 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
<base href="" /> 造成了这种情况。我根据 Angular 文档将其更改为 <base href="/" /> 并删除了第二个 <base> 标签，现在非自愿重复消失了。这可能是罪魁祸首吗？
您需要从使用字符串更改为使用组件名称
RouterModule.forRoot([
{ path: '', redirectTo: HomeComponent , pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
/* other paths mapping to components */
{ path: '**', redirectTo: 'home' }
])
【讨论】：
'' 重定向到'home' 并重用其组件定义？