什么是路由？
路由就是将应用划分成多个分区。
为什么需要路由？
用户需要访问不同的页面，指定用户的位置。
如何设定路由？
- 初级阶段：使用锚标记。
<a href="#tag" >从这里</a>
<div style="height:1200px"></div>
<a name="tag">跳到这里</a>
- HTML5客户端路由
浏览器可以在不需要新的请求的情况下，允许在代码中创建新的浏览器记录并显示适当的URL。这是利用history.pushState()实现的。
Angular路由的组成部件
- Routes：描述了应用程序支持的路由配置。
- RouterOutlet：这是一个“占位符”组件，用于告诉Angular要把每个路由的内容放在哪里。
- RouterLink指令：用于创建各种路由链接。
使用路由
- 路由配置
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作用是重定向。
- 安装路由配置
imports: [
BrowserModule,
FormsModule,
HttpModule,
/*2.安装路由配置*/
RouterModule.forRoot(routes)
],
- 使用<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>是组件被渲染的地方。
- 使用[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>
点击这个链接会触发页面重载，因为我们是单页面应用，这种情况要杜绝。
