Angular路由配置

2022-06-14 08:51:10 字數 1221 閱讀 7817

一，概述

路由就是根據不同的url位址,動態的讓根元件掛載其他元件來實現乙個單頁面應用

二，使用

1，建立專案時注意選擇建立路由--yes

import  from './components/home/home.component';


import from './components/header/header.component';


import from './components/news/news.component';


import from './components/new-detail/new-detail.component';


import from './components/header-detail/header-detail.component';


const routes: routes = [


,,,,,


];
另外可以設定匹配不到路由的跳轉頁面

//匹配不到路由的時候載入的元件或者跳轉的路由



<


h1>


<


a routerlink


="/home"


>首頁


a>


<


a routerlink


="/news"


>新聞


a>


h1>


<


router-outlet


>


router-outlet


>
4,設定選中高亮（或者其他）樣式

<


h1>


<


a routerlink


="/home"


routerlinkactive


="active"


>首頁


a>


<


a routerlink


="/news"


routerlinkactive


="active"


>新聞


a>


h1>


<


router-outlet


>


router-outlet


>
設定樣式

.active
三，父子路由

,]}

angular的路由配置

1，引入路由 import from angular router 2，路由路徑 1，每個 route 都會把乙個 url 的 path 對映到乙個元件。注意，path 不能以斜槓 開頭。路由器會為解析和構建最終的 url，這樣當你在應用的多個檢視之間導航時，可以任意使用相對路徑和絕對路徑。2，路由...

Angular路由 子路由

在商品詳情頁面，除了顯示商品id資訊，還顯示了商品描述，和銷售員的資訊。通過子路由實現商品描述元件和銷售員資訊元件展示在商品詳情元件內部。ng g component productdesc ng g component sellerinfo 重點是修改銷售員資訊元件，顯示銷售員id。import ...

angular6 路由配置

一.簡述 方便我們可以url方式和鏈結的方式使用該元件，不僅僅通過元件選擇器使用它。二.配置路由 第一步 建立路由檔案 routing flat module 第二步 修改路由檔案 第三步 建立乙個登入元件 ng generate component login第四步 路由檔案中配置登入元件 注意 ...