1.創建新項目

2.創建home news newscontent 組件

3.找到app-rounting-moudle.ts配置路由

　　1）引入組件

import { HomeComponent } from './home/home.component'; import { NewsComponent } from './news/news.component'; import { NewscontentComponent } from './newscontent/newscontent.component';

　　2）配置路由

const routes: Routes = [{path: 'home', component: HomeComponent},{path: 'news', component: NewsComponent},{path: 'newscontent/:id', component: NewscontentComponent},{path: '',redirectTo: '/home',pathMatch: 'full' } ];

4. 找到 app.component.html 根組件模板，配置 router-outlet 顯示動態加載的路由

<h1> <a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a> </h1> <router-outlet></router-outlet> <a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a> //匹配不到路由的時候加載的組件 或者跳轉的路由 { path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home' }

Angular routerLinkActive 設 置 routerLink 默認選中路由

?

<h1> <a routerLink="/home" routerLinkActive="active">首頁</a> <a routerLink="/news" routerLinkActive="active">新聞</a> </h1>

注意將樣式放在全局樣式中

.active{color:red; }

?

?

轉載于:https://www.cnblogs.com/loaderman/p/10912118.html

總結

以上是生活随笔為你收集整理的Angular中的routerLink 跳转页面和默认路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。