子路由模組

1

ng generate module hero

123

4567
891011

import  from '@angular/core';

import from '@angular/common';
@ngmodule()
export class heromodule

123

4567
8

import  from '@angular/core';

import from '@angular/router';
@ngmodule()
export class heroroutingmodule

注意將路由模組檔案和他對應的模組檔案放在同一層目錄下。

在路由模組heroroutingmudole匯入相關元件，並新增兩個路由，然後匯出heroroutingmudle類。

123

4567
891011
1213
1415
1617
1819
2021

import  from '@angular/core';

import from '@angular/router';
import from './hero-list/hero-list.component';
const herorouter: routes = [
];@ngmodule()
export class heroroutingmodule

大部分寫法和根模組中的路由寫法一致，不同的是，根模組中我們使用了靜態方法routermodule.forroot，而這裡我們使用了routermodule.forchild方法。只能在根模組中用forroot方法來註冊應用的頂級路由，在其他模組中使用forchild來註冊附屬路由。

把路由模組新增到heromodule模組中：

123

4567
891011
1213
1415

import  from '@angular/core';

import from '@angular/common';
import from './hero-routing.module';
import from './hero-list/hero-list.component';
@ngmodule()
export class heromodule

需要將建立好的子模組匯入根模組才可以使用。

123

4567

import  from './hero/hero.module';

imports: [
browsermodule,
heromodule,
],

注意imports的順序，路由器會接受第乙個匹配上導航所要求路徑的那個路由。一旦將裡面有萬用字元匹配的路由放前面，會導致後面的路由無法匹配而全部匹配到了萬用字元的路由。

現在，路由不再是單一的檔案而是分散在各個模組中的路由檔案。每個路由模組會根據載入順序將自己的路由配置追加進去。

而且，這樣的好處是，頂級路由有頂級路由檔案來維護，附屬路由有附屬路由的檔案來維護，管理起來也更方便。

Angular路由 子路由

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

vue router子路由 路由巢狀

定義 子路由，也叫路由巢狀，採用在children後跟路由陣列來實現，陣列裡和其他配置路由基本相同，需要配置path和component，然後在相應部分新增來展現子頁面資訊，相當於嵌入iframe。hello h1 新增子路由導航 導航 home 首頁 router link home one 子頁...

React又見路由之子路由

我們做應用時經常需要做底部或者頂部導航切換變換頁面功能，類似android的導航 fragment 1 創業乙個 介面首頁 先加入路由 import react from react import headercomponent from common header import from reac...