路由種類：

1. Nav，由 ion-nav 組件生成，繼承自 NavControllerBase。
2. Tabs，由 ion-tabs 組件生成，與 nav 一樣有 getActiveChildNavs 方法，用于獲取子路由。
3. Tab，有 ion-tab 組件生成，依賴于 Tabs 并且是其子路由，繼承自 Nav。

當(dāng) Tab 下還有路由時（Tab子路由），就會導(dǎo)致頁面刷新后，ionic無法根據(jù)路徑正確匹配頁面。因為ionic在通過路徑生成 View 時，子路由尚未加載完成，無法繼續(xù)生成 View，于是造成只匹配到 Tab 就結(jié)束了。

查看源碼發(fā)現(xiàn)，在 Nav 和 Tabs 中都在 ngAfterViewInit 中調(diào)用了生成 segment 的操作。

// nav
const segment = this._linker.getSegmentByNavIdOrName(this.id, this.name);

// tabs
const tabsSegment = this._linker.getSegmentByNavIdOrName(this.id, this.name);

getSegmentByNavIdOrName 方法來自 DeepLinker。

  getSegmentByNavIdOrName(navId: string, name: string): NavSegment {
    const browserUrl = normalizeUrl(this._location.path());
    const segments = this._serializer.parse(browserUrl);
    for (const segment of segments) {
      if (segment.navId === navId || segment.navId === name) {
        return segment;
      }
    }
    return null;
}

具體生成操作又指向 UrlSerializer，最后確認(rèn)生成操作是在 hydrateSegmentsWithNav 方法中實現(xiàn)的。

export function hydrateSegmentsWithNav(app: App, dehydratedSegmentPairs: DehydratedSegmentPair[]) {
  const segments: NavSegment[] = [];
  for (let i = 0; i < dehydratedSegmentPairs.length; i++) {
    let navs = getNavFromNavGroup(dehydratedSegmentPairs[i].navGroup, app);
    for (const dehydratedSegment of dehydratedSegmentPairs[i].segments) {

      // FIX，判斷navs為Tab類型時，取其子路由的值。
      if (navs.length > 0 && isPresent(navs[0]._tabId)) {
        navs = navs[0].getActiveChildNavs();
      }

      if (navs.length === 1) {
        segments.push(hydrateSegment(dehydratedSegment, navs[0]));
        navs = navs[0].getActiveChildNavs();
      } else if (navs.length > 1) {
        segments.push(hydrateSegment(dehydratedSegment, navs[navs.length - 1]));
        navs = navs[navs.length - 1].getActiveChildNavs();
      } else {
        break;
      }
    }
  }
  return segments;
}

要使子路由能夠正確加載完成，需要延遲其初始化的時間。修改 Tabs 中 ngAfterViewInit 調(diào)用 initTabs 方法的的時機。

// NEW
_initPromise: Promise<any>;

ngAfterViewInit() {
  this._setConfig('tabsPlacement', 'bottom');
  this._setConfig('tabsLayout', 'icon-top');
  this._setConfig('tabsHighlight', this.tabsHighlight);

  if (this.tabsHighlight) {
    this._plt.resize
      .takeUntil(this._onDestroy)
      .subscribe(() => this._highlight.select(this.getSelected()));
  }

  // FIX，查找父級元素是否存在Tabs，等待其初始化完成后再進行初始化。
  var parent = this.parent;
  while (parent) {
    // 找到Tabs時退出循環(huán)
    if (!!parent.getSelected) {
      break;
    }
    parent = parent.parent;
  }
 
  // 將初始化返回的Promise保存在新增的_initPromise屬性中
  if (parent) {
    parent._initPromise.then(() => {
      this._initPromise = this.initTabs();
    });
  }
  else {
    this._initPromise = this.initTabs();
  }
}

initTabs(): Promise<any> {
  let selectedIndex = (isBlank(this.selectedIndex) ? 0 : parseInt(<any>this.selectedIndex, 10));

  const tabsSegment = this._linker.getSegmentByNavIdOrName(this.id, this.name);
  if(tabsSegment) {
    selectedIndex = this._getSelectedTabIndex(tabsSegment.secondaryId, selectedIndex);
  }

  let selectedTab = this._tabs.find((t, i) => i === selectedIndex && t.enabled && t.show);
  if(!selectedTab) {
    selectedTab = this._tabs.find(t => t.enabled && t.show);
  }

  let promise = Promise.resolve();
  if(selectedTab) {
    selectedTab._segment = tabsSegment;
    // FIX，增加updateUrl屬性，防止延遲加載時，路徑被更新。
    // 判斷tabsSegment存在時不更新路徑，否則更新路徑，直接訪問域名時不會生成tabsSegment
    promise = this.select(selectedTab, { updateUrl: (tabsSegment && tabsSegment.id) ? false : true });
  }

  return promise.then(() => {
    this._tabs.forEach(t => {
      t.updateHref(t.root, t.rootParams);
    });
  });
}

還要在 Nav 中也實現(xiàn)一遍。

ngAfterViewInit() {
  this._hasInit = true;

  // FIX，查找父級元素是否存在Tabs，等待其初始化完成后再進行初始化。
  var parent = this.parent;
  while (parent) {
    // 找到Tabs時退出循環(huán)
    if (!!parent.getSelected) {
      break;
    }
    parent = parent.parent;
  }

  // 存在Tabs則等待其初始化完成后執(zhí)行初始化
  if (parent) {
    parent._initPromise.then(function () {
      this.initNav();
    });
  }
  else {
    this.initNav();
  }
}

// NEW，將初始化操作提取為方法
InitNav() {
  const segment = this._linker.getSegmentByNavIdOrName(this.id, this.name);

  if (segment && (segment.component || segment.loadChildren)) {
    return this._linker.initViews(segment).then(views => {
      return this.setPages(views, null, null);
    });
  } else if (this._root) {
    const setUrl = segment ? false : true;
    return this.push(this._root, this.rootParams, {
      isNavRoot: (<any>this._app.getRootNavById(this.id) === this),
      updateUrl: setUrl
    }, null);
  }
}

修改后重新生成項目，嵌套路由就能正確的匹配了。
修改 node_modules 中的源碼時，需要注意新增方法時要修改對應(yīng)的 .metadata.json 文件，否則打包后可能會無法執(zhí)行新增的方法。
此例子需要修改 nav.metadata.json，搜索 ngAfterViewInit，出現(xiàn)兩處匹配，復(fù)制該鍵，修改鍵名為 InitNav 即可，可以參考 tabs.metadata.json。