Angular中路由的不同种类

Angular支持各种形式的路由(route)设备，可以帮助开发者构建功能丰富的应用，本文给读者说明和演示这些不同的路由(route)的设定。

环境准备

首先用 Angular CLI构造一个简单的案例，执行:

1	ng new route-demo-app

运行后，系统会提示你，是否需要启用路由功能,注意: 默认是N,不启用路由功能。 在本实验中，记得一定要选择Y

1 2	D:\>ng new route-demo-app ? Would you like to add Angular routing? (y/N)

接下来，系统会提示你选择用哪种样式定义语言，在本实验中选择CSS

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
  Less   [ http://lesscss.org                                                 ]
  Stylus [ http://stylus-lang.com                                             ]

建立完项目以后，先不做任何改动，启动项目，观察运行情况，以验证以上步骤是否执行正确:

1 2	cd route-demo-app ng serve

如果正常执行，可以通过浏览器看到默认的首页。

构建基本路由

基本路由也就是我们通常看到的页面调整，比如: 用户登录成功以后调整到首页这个场景。为演示这个场景，我们先建立两个页面（组件 Component）。顺序执行一下命令建立页面:

1	ng g c pages/HomePage

1	ng g c pages/LoginPage

可以在 src/app/pages 目录中查看到这两个新建的组件。

修改 app-routing.module 文件，在Routers常量定义中加入路由规则:

const routes: Routes = [
  {
    path: '',
    component: LoginPageComponent
  },
  {
    path: 'home',
    component: HomePageComponent
  }
];

path设置为空串的路由代表默认路由或是根路由, 这里我们设置为 LoginPage, 也就是启动应用后默认应该显示 LoginPage。

删除 app.component.html 文件中除以外的所有内容。删除以后，app.component.html 内容应该是这样的:

1	<router-outlet></router-outlet>

现在运行程序，可以看到程序现在显示的是默认的页面 LoginPage。

在 LoginPage 中增加从 Login 到 Home 的路由。这里我们聚焦在路由功能，所以就没有去实现Login的逻辑.
修改 login-page.component.html 文件，添加一个指到 home 的路由链接, 修改后的代码如下：

<p>
  login-page works!
</p>

<a routerLink='/home'>Go to Home</a>

保存以后就可以通过这个链接去到 Home 页面了。

子路由（嵌套路由）

子路由指的是：在一个已经在 route-outlet 中显示的组件中再加入一个 route-outlet, 在嵌套的route-outlet 中进行的路由。比如在 home 页面中，我们可以通过路由切换不同的功能页面，好像在app中通过 tab 切换到不同的功能的场景。演示场景如下:

顺序建立一下页面:

1	ng g c pages/home/TodoPage

1	ng g c pages/home/MinePage

把新建的页面添加到 home 路由下，形成子路由, 打开 app-routing.module, 修改如下：

const routes: Routes = [
  {
    path: '',
    component: LoginPageComponent
  },
  {
    path: 'home',
    component: HomePageComponent,
    children: [
      {path: 'todo', component: TodoPageComponent},
      {path: 'mine', component: MinePageComponent}
    ]
  }
];

最后，在 HomePage 中添加和链接, 打开 home-page.component.html 文件，修改如下:

<p>
  home-page works!
</p>

<ul>
<li><a routerLink='todo'>Go to Todo</a></li>
<li><a routerLink='mine'>Go to Mine</a></li>
</ul>

<router-outlet></router-outlet>

修改完成后，运行程序，就可以看到子路由的效果了。

命名路由

要是同一个页面需要有两个该怎么处理呢？ Angular为我们提供了命名的 route-outlet。演示如下：

执以下命令，在 home 中建立一个新的页面:

1	ng g c pages/home/MessagePage

打开 app-routing.module, 修改如下:

const routes: Routes = [
  {
    path: '',
    component: LoginPageComponent
  },
  {
    path: 'home',
    component: HomePageComponent,
    children: [
      {path: 'todo', component: TodoPageComponent},
      {path: 'mine', component: MinePageComponent},
      {path: 'message', component: MessagePageComponent, outlet: 'message'}
    ]
  }
];

再打开 HomePage，添加一个命名的 route-outlet。代码如下：

<p>
  home-page works!
</p>

<ul>
<li><a routerLink='todo'>Go to Todo</a></li>
<li><a routerLink='mine'>Go to Mine</a></li>
</ul>

<div>
  <div>To Message</div>
  <a [routerLink]="[{ outlets: { message: ['message'] } }]">Show Message</a>
</div>

<router-outlet></router-outlet>
<router-outlet name="message"></router-outlet>

可以看到，我们添加了一个名为 message 的 router-outlet, 在理解中，我们需要指名是操作那个 outlet。