通常都是在獨(dú)立的頂級(jí)模塊中加載和配置路由器，然后由根模塊AppModule導(dǎo)入它。按照慣例豺裆，這個(gè)文件位于 src/app下，名字叫做 app-routing号显。
--flat把這個(gè)文件放進(jìn)了 src/app 中臭猜，而不是單獨(dú)的目錄中。
--module=app 告訴 CLI 把它注冊(cè)到AppModule的imports 數(shù)組中押蚤。
// 在主目錄下創(chuàng)建路由
ng generate module app-routing --flat --module=app
生成的文件內(nèi)容如下：
其中
RouterModule.forRoot()方法用于在主模塊中定義主要的路由信息蔑歌，用在根模塊中。還有一個(gè)方法 RouterModule.forChild()揽碘，這個(gè)就是用于子模塊中的次屠。
-
Routes是路由配置，它有兩個(gè)屬性：path和component雳刺〗僭睿可以根據(jù)不同的URL，跳轉(zhuǎn)去不同的頁(yè)面掖桦。用法如下：
import { loginComponent } from 'xxxx/login.component ';
import { homeComponent } from 'xxxx/home.component ';
const routes: Routes = [
// 添加默認(rèn)路由
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
// 當(dāng)用戶(hù)訪(fǎng)問(wèn)的頁(yè)面不存在時(shí)本昏，這個(gè)路由必須放在最后。
{ path:'**', component: Code404Component }
];
-
Router-Outlet：頁(yè)面占位符指令
<router-outlet></router-outlet>
-
Router：有兩個(gè)常用方法navigate()和navigateByUrl()枪汪，用于導(dǎo)航到一個(gè)指定的路由
import { Router } from '@angular/router';
constructor(private router: Router){}
toXXX(){
this.router.navigate(['/login']);
}
-
routerLink： html中聲明路由導(dǎo)航用的指令
// 寫(xiě)法一
<a routerLink="/login">Login</a>
// 寫(xiě)法二
<a [routerLink]="['/login']"></a>
有關(guān)路由配置
路由重定向：用戶(hù)訪(fǎng)問(wèn)一個(gè)特定的地址時(shí)涌穆，將其重定向到另一個(gè)指定的地址。
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
];
子路由：嵌套在路由里的路由就是子路由雀久。假設(shè)我們的home頁(yè)面下有aaa和bbb兩個(gè)頁(yè)面宿稀，舉個(gè)栗子：
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home',
component: HomeComponent,
children: [
{ path: '/aaa', component: AaaComponent},
{ path: '/bbb', component: BbbComponnet}
]
}
];
子路由將繼承副路由的路徑，因此aaa和bbb頁(yè)面的路由匹配地址是/home/aaa和 /home/bbb赖捌。
定義好子路由以后祝沸，就要使用子路由，在HomeComponent組件中添加 <router-outlet></router-outlet>指令到你要顯示 aaa/bbb 頁(yè)面的位置就好了。
loadChildren
我第一次看到這個(gè)東西是在做項(xiàng)目的時(shí)候罩锐，有一天發(fā)現(xiàn)同事更改了路由配置奉狈，用到了loadChildren。這個(gè)呢是用于讓路由獲取另一個(gè)模塊中定義的子路由唯欣。
所以要使用loadChildren, 我們就需要先新建一個(gè)模塊。
ng g module home/home-routing搬味，運(yùn)行后得到如下結(jié)果：
AppModule 中，因?yàn)槁酚梢罁?jù) loadChildren 屬性配置的路徑去加載 HomeModule 碰纬，即懶加載功能萍聊。只有當(dāng)用戶(hù)訪(fǎng)問(wèn) /home/xxx 路徑的時(shí)候，才會(huì)加載對(duì)應(yīng)的模塊悦析。
點(diǎn)開(kāi)home-routing文件：
declarations，以及對(duì)CommonModule 的引用 强戴。并且導(dǎo)入 RouterModule 和 Routes 亭螟。
