路由

什么是路由？

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

为什么需要路由？

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

如何设定路由？

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

从这里

跳到这里

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. 使用调用RouterOutlet指令

  

    Navigation:
    

      
Home
      
About
      
Contact
    
  
  

是组件被渲染的地方。

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

 

      
Home
      
About
      
Contact
    

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

Home

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