路由

什么是路由？

路由就是将应用划分成多个分区。

为什么需要路由？

用户需要访问不同的页面，指定用户的位置。

如何设定路由？

1. 初级阶段：使用锚标记。

<a href="#tag" >从这里</a>
<div style="height:1200px"></div>
<a name="tag">跳到这里</a>

2. HTML5客户端路由
   浏览器可以在不需要新的请求的情况下，允许在代码中创建新的浏览器记录并显示适当的URL。这是利用history.pushState()实现的。

Angular路由的组成部件

• Routes：描述了应用程序支持的路由配置。
• RouterOutlet：这是一个“占位符”组件，用于告诉Angular要把每个路由的内容放在哪里。
• RouterLink指令：用于创建各种路由链接。

使用路由

1. 路由配置

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent},
  {path: 'contactus', redirectTo: 'contact'}
];

redirectTo作用是重定向。

2. 安装路由配置

 imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    /*2.安装路由配置*/
    RouterModule.forRoot(routes)
  ],

3. 使用<router-outlet>调用RouterOutlet指令

<div>
  <nav>
    <a>Navigation:</a>
    <ul>
      <li><a [routerLink]="['home']">Home</a></li>
      <li><a [routerLink]="['about']">About</a></li>
      <li><a [routerLink]="['contact']">Contact</a></li>
    </ul>
  </nav>
  <router-outlet></router-outlet>
</div>

<router-outlet></router-outlet>是组件被渲染的地方。

4. 使用[routerLink]调用routerLink指令

 <ul>
      <li><a [routerLink]="['home']">Home</a></li>
      <li><a [routerLink]="['about']">About</a></li>
      <li><a [routerLink]="['contact']">Contact</a></li>
    </ul>

routerLink指令的作用是在不重载页面的情况下链接路由。使用纯HTML，就像如下所示:

<a href="/#/home">Home</a>

点击这个链接会触发页面重载，因为我们是单页面应用，这种情况要杜绝。