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

Question

该页面当前是http://localhost:4200/foo.

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

我希望页面保持在同一个 url ( http://localhost:4200/foo) 中。

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

我还希望页面保留在我输入的相同 url ( 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 - 在浏览器刷新时将页面重定向到主页与我的完全相反。现在，我不知道这种情况下的 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);