typescript 刷新后路径重复

wbgh16ku  于 2023-02-13  发布在  TypeScript
关注(0)|答案(4)|浏览(135)

我面临着路径重复的问题。为了测试的目的,我做了一个TestingComponent来演示。
我的代码:

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(这很奇怪,它不应该这样工作)。
我已经试过改变路线的顺序,但一点帮助都没有。

1yjd4xko

1yjd4xko1#

您正在进行相对导航。请在url前加上/以导航absolutely
路径匹配时重定向到的URL。
如果URL以斜杠(/)开头,则为绝对重定向,否则为相对路径URL。〉注意,在绝对重定向之后,不会再计算其他重定向。
如果不存在,则路由器不重定向。

{
    path: '',
    redirectTo: '/testing',
    pathMatch: 'full'
  },
z9smfwbn

z9smfwbn2#

在添加“pathMatch:'已满',

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

https://stackblitz.com/edit/angular-ivy-jnaiij?file=src%2Fapp%2Fapp.routing.ts

mbjcgjjk

mbjcgjjk3#

问题解决了。有人在angular.json架构构建选项中添加了baseHref。感谢您的帮助!

eulz3vhy

eulz3vhy4#

我以前也遇到过这个问题,对于Windows IIS我必须更改条目

<base href="/">

在初始 index.html 文件或项目中:

<base href="">

后来,当更新项目时,没有“/”斜杠的条目导致开发服务中URL路由的重复,因为根-“/”字符不存在。
如果您遇到类似的问题,解决方案可能是通过确保,您的 index.html 文件包含:

<head>
    . . .
    <base href="/">
    . . .

相关问题