浏览器重新加载时Angular 4重定向到根路径

Question

当前页面为http://localhost:4200/foo。

案例1：如果我按下浏览器的重新加载按钮或在浏览器中输入相同的url，页面将重定向到http://localhost:4200（根路径）。

我希望页面保持相同的网址 (http://localhost:4200/foo)。

案例 2：如果我输入 http://localhost:4200/foo（相同的 url），页面将重定向到 http://localhost:4200（根路径）。

我还希望页面保留在我输入的相同网址中 (http://localhost:4200/foo)。

否则，如果页面是http://localhost:4200，我输入http://localhost:4200/foo，它工作正常。我可以正常通过 url 路径导航。问题只是当我走同一条路时。

我在 app.module.ts 中的根路径是：

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: '',
        loadChildren: './bar/bar.module#BarModule'
    },
], { });

而我在 foo.module.ts 中的路径是：

    const fooRouting: ModuleWithProviders = RouterModule.forChild([
      {
        path: 'foo',
        component: FooComponent
      }
    ]);

OBS：这个问题Angular 5 - redirect page to homepage on browser refresh 与我的正好相反。现在，我不知道这种情况下 Angular 的默认行为是什么。

DiPix 修正后编辑：

我在 app.module.ts 中的根路径是：

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: '',
        loadChildren: './bar/bar.module#BarModule'
    },
], { });

而我在 foo.module.ts 中的路径是：

    const fooRouting: ModuleWithProviders = RouterModule.forChild([
      {
        path: '',
        pathMatch: 'full',
        component: FooComponent
      }
    ]);

编辑 2：

用谷歌浏览器调试，我设置了“保留日志”。

使用任何其他站点进行测试，如果您位于“www.anydomain.com/path”并重新加载浏览器，则 chrome 会写入 "Navigated to 'www.anydomain.com/path'。

使用我的应用程序进行测试，如果我在“http://localhost:4200/foo”并重新加载浏览器，chrome 会写入"Navigated to 'http://localhost:4200/'。

浏览器导航到根路径！

Answer 1

您需要在应用程序的根目录定义一些路由。像这样的：

const routes: Routes = [
  { path: 'foo', component: FooComponent},
  { path: '', redirectTo: '/foo', pathMatch: 'full' },
  { path: '**', component: FooComponent }
];

这些路由将转到您定义 forRoot() 方法的位置，从您的代码来看，该方法如下所示：

const rootRouting: ModuleWithProviders = RouterModule.forRoot(routes);

Answer 2

您在 foo.module.ts 中有路径“foo”，这是可疑的。因为您已经在 app.module.ts 中声明了此路径。关键是如果你使用延迟加载，那么你不应该在 app.module 中导入 foo.module。检查您在 app.module 中的导入。我打赌你已经导入了这个模块。并且不要忘记在 foo.module.ts 中将路径更改为 ''