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