路由和导航

angular 中使用“单页应用”的步骤

1. 定义“路由词典”--- [{URL - 组件},{URL - 组件}]

// app.module.ts 为每个路由组件分配一个路由地址
let routes = [
    {path: 'index', component: IndexComponent},
    ..........
    {path: 'ucenter', component: UserCenterComponent},
]

2. 在根组件中注册路由词典

// app.module.ts
imports:[BrowserModule, RouterModule.forRoot(routes)]

3. 创建路由组件挂载点 -- 称为“路由出口”

// app.component.html
<router-outlet></router-outlet>

4. 访问测试

http://127.0.0.1:4200/ucenter

route:

route：路径、路线、路由，有两部分：目标地址 + 处理过程

router:

router：路由器、内部包含着路由词典

注意

1. 路由词典中的路由地址不能以/开头或结尾，但中间可以包含/
2. 路由词典中可以指定一个默认首页地址：{path:"", component:...}
3. 路由词典中每个路由中要么指定Component（由那个组件提供内容），要么指定redirectTo（重定向到另一个路由地址）
4. 路由词典中可以指定一个匹配任意地址的地址：'** ' , 注意改地址只能用于整个路由词典的最后一个！！