Angular路由使用(更新完结)

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

1.路由跳转:

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

1.1路由标签跳转:

Angular路由使用(更新完结)_第1张图片

1.2.1跳转方式1:

user

1.2.2跳转方式2:

users

Angular路由使用(更新完结)_第2张图片

2.设置路由激活状态:

在这里插入图片描述

user
home

Angular路由使用(更新完结)_第3张图片
Angular路由使用(更新完结)_第4张图片
Angular路由使用(更新完结)_第5张图片

3.路由方法跳转:

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

在这里插入图片描述
Angular路由使用(更新完结)_第6张图片
在这里插入图片描述
Angular路由使用(更新完结)_第7张图片
Angular路由使用(更新完结)_第8张图片

4.路由跳转传递参数:

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

Angular路由使用(更新完结)_第9张图片

4.2其他:

在这里插入图片描述
Angular路由使用(更新完结)_第10张图片
Angular路由使用(更新完结)_第11张图片

5.路由接收参数:

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

Angular路由使用(更新完结)_第12张图片
Angular路由使用(更新完结)_第13张图片
Angular路由使用(更新完结)_第14张图片

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

Angular路由使用(更新完结)_第15张图片

效果同上

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

Angular路由使用(更新完结)_第16张图片
Angular路由使用(更新完结)_第17张图片
Angular路由使用(更新完结)_第18张图片

你可能感兴趣的:(笔记,angular)