官网链接： angular官网 路由与导航
最好是跟着官网写一遍代码，然后来看这个总结，会比较清晰
实现一个简单的路由界面
- 需要在index.htmlde
<head>的标签下添加一个<base>元素，规定页面中所有相对链接的基准url
// index.html
<base href="/">
- 在module中导入路由库
// app.module.ts
import { RouterModule, Routes } from '@angular/router';
- 配置
path为url路径，component为地址对应的组件
// app.module.ts
const appRoutes: Routes = [
{ path: 'hero', component: HeroComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes);
]
})
- 路由出口
在该标签下显示对应url的视图
// app.component.html
<router-outlet></router-outlet>
- 路由链接
在a标签上添加routerLink指令，表示对应的url地址
// app.component.ts
templare: `
<a routerLink="/hero">Hero</a>
<router-outlet></router-outlet>
`
路由解读
1. 路由原理
官网解读，路由器使用了最新H5的history.pushState进行导航
pushState无刷新改变url
2. 增加<base href="/">
在index.html的<head>标签下增加<base href="/">
href属性规定页面中所有相对链接的基准url
例如将href="/abc"，路由都会变成此类地址http://ip/abc/...
3. 路由模块
4. <a>标签下的相关属性绑定
5. 路由配置文件
6. ActivatedRoute路由服务
注入ActivatedRoute服务来或者当前激活路由的相关信息
// app.component.ts
import { ActivatedRoute } from '@angular/router'
...
export class AppComponent {
constructor(
private route: ActivatedRoute
) {
console.log(route); // 通过打印理解会比较直观
}
}
备注：
a. children只会出现当前路由下已激活的子路由，而不是所有的子路由
网友评论