# Routes within au-compose

**URL:** <https://discourse.aurelia.io/t/routes-within-au-compose/5057>\
**Category:** vNext\
**Created:** [January 18, 2023, 9:41am UTC](https://discourse.aurelia.io/t/routes-within-au-compose/5057 "2023-01-18T09:41:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [January 18, 2023, 9:41am UTC](https://discourse.aurelia.io/t/routes-within-au-compose/5057/1 "2023-01-18T09:41:36Z")

</div>

I am currently running tests with Aurelia 2 and router-lite.

My goal is to render dynamic components (“Tabs”) with au-compose and using child routing within the components using a new viewport.

> **[routing within tabs - StackBlitz](https://stackblitz.com/edit/au2-conventions-6a4pfn?file=src%2Ftab2.ts)**
>
> Run Aurelia application with conventions

Is this somehow possible? Thanks for any help!

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [January 18, 2023, 6:54pm UTC](https://discourse.aurelia.io/t/routes-within-au-compose/5057/2 "2023-01-18T18:54:54Z")

</div>

Here is a very naive solution: [routing within tabs (forked) - StackBlitz](https://stackblitz.com/edit/au2-conventions-qmbp7t?file=src/home.ts). However, the idea should be clear and can be enhanced to be more sophisticated.

The magic is only here:

```typescript
  tabs = [
    { id: 't1', title: 'Tab 1', component: Tab1 },
    { id: 't2', title: 'Tab 2', component: Tab2 },
  ];
  selectedTab;

  loading(params) {
    this.selectedTab = this.tabs.find((x) => x.id == params.id) ?? this.tabs[0];
  }

```

That is when you use paths like `/home/t1` or `/home/t2`, tab#1 or tab#2 will be activated.

Have fun ✌

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [January 19, 2023, 10:57am UTC](https://discourse.aurelia.io/t/routes-within-au-compose/5057/3 "2023-01-19T10:57:03Z")

</div>

I think I have expressed myself inaccurately, my goal was to have child routing within a tab. But I think I found the solution (without au-compose):

> **[routing within tabs v2 - StackBlitz](https://stackblitz.com/edit/au2-conventions-nsnqbt)**
>
> Run Aurelia application with conventions

Thank you very much for your help!