首页 > 解决方案 > 没有角度哈希的子路由不刷新

问题描述

我正在做一个有角度的项目。早些时候我使用哈希定位策略,但我开始知道它对 SEO 不利。

所以我试图删除它。

现在我的一些孩子路线没有打开,一些没有刷新。

这是我的app.module.ts

export const appRoutes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      { path: 'profile', component: ProfileComponent },
      { path: 'student-dashboard', component: StudentDashboardComponent },
      { path: 'tutor-dashboard', component: TutorDashboardComponent },
    ],
  },
  { path: '', component: FacadeComponent },
  { path: 'admin', component:AdminPortalComponent,
  pathMatch:'full',
    children:[
      { path: 'categories',component:CategoriesComponent},
      { path: 'analytics',component:AnalyticsComponent}
    ]
  },
];
@NgModule({
  declarations: [
    all the components and pipes..
  ],
  imports: [
    ... ,
    RouterModule.forRoot(appRoutes),
  ],
  entryComponents: [WelcomeComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

现在,如果我home/tutor-dashboard单击按钮.. 它可以工作。但是当我尝试刷新时,它给了我这个错误: 在此处输入图像描述

当我尝试打开admin/categories它时,它没有显示出来..给出错误:

在此处输入图像描述

我确保每个父组件中都有路由器插座。当我把

RouterModule.forRoot(appRoutes, useHash: 'true')

一切正常..但我不想使用哈希。

请帮我解决这个问题。

我研究了.htaccess重写 url 的文件,但我认为这是用于后期制作的。这里它甚至不能在本地服务器上运行。

在我的索引 html 中找到了基本 href,我正在使用 angular 9

<base href="./" />

标签: angularangular-routing

解决方案


推荐阅读