Angular路由使用(更新完结)

所需模块配置信息(配置路由信息)

1.路由跳转:

不用a标签的href属性跳转,因为单页应用如果用a标签的href属性跳转就会刷新页面

1.1路由标签跳转:

1.2.1跳转方式1:

<a routerLink="/user">user</a>

1.2.2跳转方式2:

<a [routerLike]="['/users']">users</a>

2.设置路由激活状态:

<a routerLink="/user" routerLinkActive="color">user</a>
<a routerLink="/home" routerLinkActive="color">home</a>

3.路由方法跳转:

3.1添加按钮,绑定方法(navigate):

4.路由跳转传递参数:

4.1根模块,路径后添加数据(路径 + /: + 参数名)

4.2其他:

5.路由接收参数:

5.1路由快照获取参数(刚刚用的是user去传参数到home,现在我们用home接收参数):

5.2路由订阅获取参数(路由订阅可以监听路由参数变化)

效果同上

6.子路由的使用(使用子路由的时候要确定自己的包,根目录下的路由显示要用/,同级要用./)