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

Question

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

情况1：如果我按浏览器的刷新按钮或在浏览器中输入相同的URL，页面将重定向到根路径http://localhost:4200。

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

情况2：如果我输入相同的URLhttp://localhost:4200/foo，页面将重定向到根路径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：

使用 Google Chrome 进行调试，我已经设置了“保留日志”。

在任何其他网站上进行测试，如果您在“www.anydomain.com/path”处并重新加载浏览器，则 Chrome 将写入"Navigated to 'www.anydomain.com/path'"。

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

浏览器导航到根路径！

- Igor Torres

---

看起来您没有设置任何根路由。在找到根路由之后，会发现子路由。因此，您可以简单地为''设置一个根路由，并将您的子路由用于该路径的子路由。- https://angular.io/guide/router - Notmfb

@Igor，请问您能否检查一下您的应用程序中是否有任何常见组件，并且您是否将用户重定向到“ /”？ - Rohìt Jíndal

我已经仔细检查过了。没有任何组件重定向到“/”。 - Igor Torres

我从零开始创建了一个新项目，并在其中使用了不同的文件夹结构。在那里一切都正常工作。我将保留这个问题，因为我仍然对为什么它不起作用感到困惑。 - Igor Torres

你解决了这个问题吗？我也遇到了同样的问题，让我感到很抓狂。 - werwuifi

@werwuifi 我没有这样做。我只是顺便停止使用 Angular :) - Igor Torres

Answer 1

你需要在应用程序的根目录下定义一些路由。类似于这样：

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

这些路由将会在你定义forRoot()方法的地方进行，从你的代码看起来像这样：

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

- Narm

---

我按照你说的做了。现在我的代码在rootRouting中有一些路径，在子模块中有子路径。我已经编辑了我的问题。问题仍然存在。 - Igor Torres

我可以正确地导航，但当我重新加载页面时，它会回到根路径。 - Igor Torres

Answer 2

你在 foo.module.ts 中使用了路径 'foo'，这是有点可疑的。因为你已经在 app.module.ts 中声明了这个路径。问题在于，如果你正在使用懒加载，则不应该在 app.module 中导入 foo.module。请检查 app.module 中的导入。我敢打赌你已经导入了这个模块。别忘了在 foo.module.ts 中将路径更改为 ''。

- DiPix

---

你是对的，我在app.module中导入了foo.module，所以我已经更正了它并改变了fooRouting。 - Igor Torres

然而，问题仍在发生。当我重新加载页面时，它会跳转到根路径。 - Igor Torres