Angular 主路由配置无效（空路径）

Question

在我的路由器配置中，我在路径 'dashboard' 下配置了一个 DashboardComponent，我想在没有指定路径（空路径，所以只是/).

这是我的代码：

const appRoutes: Routes = [
  { path: '', redirectTo: 'dashboard'},
  { path: 'dashboard', component: DashboardComponent },
  /* other routes... */
];

Unhandled Promise rejection: Invalid configuration of route '{path: "", redirectTo: "dashboard"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'

Answer 1

问题是缺少空路由的pathMatch 属性，默认为prefix。

但是在这种情况下，pathMatch 值应设置为 full:

const appRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  { path: 'dashboard', component: DashboardComponent },
  /* other routes... */
];

原因如下：

Technically, pathMatch = 'full' results in a route hit when the remaining, unmatched segments of the URL match ''. In this example, the redirect is in a top level route so the remaining URL and the entire URL are the same thing.

The other possible pathMatch value is 'prefix' which tells the router to match the redirect route when the remaining URL begins with the redirect route's prefix path.

Don't do that here. If the pathMatch value were 'prefix', every URL would match ''.

更多细节参考官方文档：https://angular.io/guide/router#redirecting-routes

Angular 主路由配置无效（空路径）

Angular invalid configuration of main route (empty path)

redirect

routing

angular-routing

angular

angular-router