如何将 angular url 路由到默认组件？

Question

我正在修改英雄游代码练习

我在路由中，如果你除了 localhost:4200 什么都不传递，那么它会重定向到仪表板组件。

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

const routes: Routes = [{path: 'heroes', component: HeroesComponent},
                        {path: 'dashboard', component: DashboardComponent } ,
                        {path: '', redirectTo: '/dashboard', pathMatch:'full' },
                        ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

但是如果我删除这一行，就会发生一些奇怪的事情

 {path: 'dashboard', component: DashboardComponent }

然后它停止重定向到仪表板组件。为什么？它不应该影响到仪表板的路由，因为它就在路径上方：''代码，而且我没有在 url 中传递 /dashboard。为什么它会影响默认路径代码？

Answer 1

要定义根路径，空路径即可。只需将它重定向到 DashboardComponent.You 不必使用重定向到

来重定向它

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

const routes: Routes = [{path: 'heroes', component: HeroesComponent},
                        {path: '', component: DashboardComponent }
                        ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 2

影响它是因为您的路径正在使用属性 "redirectTo" 并且引用 现有路径 ，在这种情况下， "/dashboard" 因此，如果该路径不存在（如果您删除路径 '/dashboard'），重定向将失败。

如果您想在不引用其他路径的情况下进行重定向，可以使用 Sander Wooming 的建议

如何将 angular url 路由到默认组件？

How to route the angular url to default component?

angular

typescript

angular8

angular-routing