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.子路由的使用(使用子路由的時候要確定自己的包,根目錄下的路由顯示要用/,同級要用./)