刷新后路径重复
我面临重复路径的问题。为了测试目的，我做了一个测试组件来演示。
我的代码：
const routes: Routes = [
{
path: '',
redirectTo: 'testing',
pathMatch: 'full'
},
{
path: 'testing',
component: TestingComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
@NgModule({
declarations: [
AppComponent,
TestingComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
],
providers: [DatePipe],
bootstrap: [AppComponent]
})
export class AppModule { }
在应用程序组件 html 中：
<router-outlet></router-outlet
问题是特定于该项目的，当我创建一个新项目时，一切正常，但在这个中：
当我输入 localhost:4200 时，它会将我重定向到 localhost:4200/testing （这是正确的） 当我刷新页面时，它会将我从 localhost:4200/testing 重定向到 localhost:4200/testing/testing （这很奇怪，它不应该像这样工作）。
我已经尝试过更改路线的顺序，但根本没有帮助。
I'm facing the issue with duplicated path. For testing purpose I made a TestingComponent to demonstrate.
My code:
const routes: Routes = [
{
path: '',
redirectTo: 'testing',
pathMatch: 'full'
},
{
path: 'testing',
component: TestingComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
@NgModule({
declarations: [
AppComponent,
TestingComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
],
providers: [DatePipe],
bootstrap: [AppComponent]
})
export class AppModule { }
In app component html:
<router-outlet></router-outlet
The issue is specific for the project, when I made a new project everything works fine, but in this one:
When I enter localhost:4200 it redirects me to localhost:4200/testing (it is correct)
When I refresh page it is redirecting me from localhost:4200/testing to localhost:4200/testing/testing (which is strange and it should not work like this).
I have already tried changing order of the routes but it not helped at all.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您正在相对导航。在 URL 前面添加
/进行绝对导航。You are navigating relatively. Prefix the url with a
/to navigateabsolutely.添加 'pathMatch: 'full'' 后即可工作，
https://stackblitz.com/edit/angular-ivy-jnaiij?file=src%2Fapp%2Fapp.routing.ts
It's working after adding 'pathMatch: 'full'',
https://stackblitz.com/edit/angular-ivy-jnaiij?file=src%2Fapp%2Fapp.routing.ts
问题解决了。有人在
angular.json架构师构建选项中添加了baseHref。感谢您的帮助！The problem was solved. Someone added
baseHrefinangular.jsonarchitect build options. Thanks for your help!我之前也遇到过这个问题。
对于 Windows IIS，我必须将
初始 index.html 文件或项目中的条目更改为：
稍后，在更新项目时，不带“/”斜杠的条目导致 URL 路由重复在开发服务中，由于不存在根“/”字符。
如果您遇到类似的问题，解决方案可能是确保您的 index.html 文件包含：
I also faced this issue before.
For Windows IIS I had to change the entry
in the initial index.html file or the project to:
later, when updating the project, the entry without the "/" slash caused the duplication of the URL routes in the development serving, due to the fact the root - "/" character was not present.
If you are facing similar issue, the solution may be by making sure, your index.html file contains: