title: Ionic tabs within page
body: <p>I have an Ionic 3 Angular app that I'm trying to upgrade to Ionic 6.
  The app itself is not tabbed, but there are pages within it that have tabs.</p>
  <p>A simplified example:</p>
  <p><code>foo.html</code>:</p>
  <pre><code>&lt;ion-header&gt;
    &lt;!-- insert header here --&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;ion-tabs&gt;
      &lt;ion-tab-bar slot=&quot;bottom&quot;&gt;
        &lt;ion-tab-button tab=&quot;guide&quot;&gt;
          &lt;ion-icon md=&quot;map-sharp&quot; ios=&quot;map&quot;&gt;&lt;/ion-icon&gt;
          &lt;ion-label&gt;Guide&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
        &lt;ion-tab-button tab=&quot;scan&quot;&gt;
          &lt;ion-icon name=&quot;barcode-sharp&quot;&gt;&lt;/ion-icon&gt;
          &lt;ion-label&gt;Scan&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
      &lt;/ion-tab-bar&gt;
    &lt;/ion-tabs&gt;
  &lt;/ion-content&gt;
  </code></pre>
  <p>The problem is how to arrange it so that upon opening <code>foo</code>, the <code>foo</code> page loads, containing the <code>guide</code> page, and switching between tabs of the <code>foo</code> page doesn't unload that page.</p>
  <p>(I'm not having trouble getting <code>foo</code> to set the tab to <code>guide</code>; the issue is getting the router to work properly.)</p>
  <p>Things I've tried and why they didn't work:</p>
  <ul>
  <li><p>Using <code>UrlHandlingStrategy</code> to only look at the last component; caused the <code>foo</code> page to be replaced entirely by the <code>guide</code> page and the header and tab bar were gone.</p>
  </li>
  <li><p>Having <code>foo/guide</code> route to <code>GuidePage</code>; <code>guide.html</code> contains <code>ion-virtual-scroll</code> elements and it complains of a <code>ChunkLoadError</code> because it tried to load the chunk from <code>/foo/[snip]ion-virtual-scroll[snip].js</code>. Also, that might have failed for the same reason as above.</p>
  </li>
  </ul>
  <p>Is there any good way to do this?</p>