Angular中的路由配置、路由重定向、默认选中路由

1. Angular中的路由配置

在Angular中使用路由配置来实现页面之间的导航。路由配置是通过Router模块来完成的，它包含了路由路径、组件以及其他一些配置信息。

首先，在app.module.ts中引入Router模块，并把RouterModule注入到imports数组中：

import { RouterModule, Routes } from '@angular/router';

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

然后，在app.module.ts中定义一个routes数组，用来存放路由的配置信息：

const routes: Routes = [

  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  //...
];

这个routes数组中的每个元素都是一个配置对象，包含了路由的路径和路由对应的组件。

接下来，在app.component.html中使用router-outlet指令来显示组件：

<router-outlet></router-outlet>

通过以上的配置，当用户访问“/home”路径时，会显示HomeComponent组件；当用户访问“/about”路径时，会显示AboutComponent组件。

2. 路由重定向

有时候我们希望当用户访问某个路径时，自动重定向到另一个路径。在Angular中，可以通过redirectTo属性实现路由重定向。

在routes数组中定义一个重定向的配置对象：

{ path: '', redirectTo: '/home', pathMatch: 'full' }

上面的配置表示当访问根路径时，会自动重定向到“/home”路径。

redirectTo属性指定了重定向的目标路径，pathMatch属性用来指定匹配规则。在上面的配置中，设置为'full'表示要求路径必须完全匹配，只有当路径为空时才会重定向。

另外，还可以通过redirectTo属性指定一个具体的路由路径，而不是一个字符串：

{ path: '', redirectTo: {path: '/home'}, pathMatch: 'full' }

这样做可以方便地传递参数给目标路径。

3. 默认选中路由

有时候我们希望在加载页面时，默认选中某个路由。在Angular中，可以通过RouterModule.forRoot方法的第二个参数来实现默认选中路由的功能。

在app.module.ts中修改RouterModule.forRoot方法的参数，添加一个默认选中的配置：

RouterModule.forRoot(routes, { initialNavigation: 'enabled' })

这样做之后，当用户第一次访问页面时，会自动导航到默认选中的路由。

通过以上的路由配置、路由重定向和默认选中路由的功能，我们可以实现页面之间的导航和页面的跳转。

本文主要介绍了在Angular中如何进行路由配置，包括如何定义路由路径和路由对应的组件，以及如何实现路由重定向和默认选中路由的功能。通过这些功能，我们可以方便地实现不同页面之间的导航和跳转。