什么是路由产阱？
路由就是將應用劃分成多個分區(qū)。
為什么需要路由攘乒？
用戶需要訪問不同的頁面贤牛，指定用戶的位置。
如何設定路由则酝？
- 初級階段：使用錨標記殉簸。
<a href="#tag" >從這里</a>
<div style="height:1200px"></div>
<a name="tag">跳到這里</a>
- HTML5客戶端路由
瀏覽器可以在不需要新的請求的情況下，允許在代碼中創(chuàng)建新的瀏覽器記錄并顯示適當?shù)腢RL沽讹。這是利用history.pushState()實現(xiàn)的般卑。
Angular路由的組成部件
- Routes：描述了應用程序支持的路由配置。
- RouterOutlet：這是一個“占位符”組件爽雄，用于告訴Angular要把每個路由的內(nèi)容放在哪里蝠检。
- RouterLink指令：用于創(chuàng)建各種路由鏈接。
使用路由
- 路由配置
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>調(diào)用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]調(diào)用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>
點擊這個鏈接會觸發(fā)頁面重載焰檩，因為我們是單頁面應用，這種情況要杜絕订框。
