Routes within au-compose

vNext
1

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.

Is this somehow possible? Thanks for any help!

2

Here is a very naive solution: routing within tabs (forked) - StackBlitz. However, the idea should be clear and can be enhanced to be more sophisticated.

The magic is only here:

  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 :v:

3

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):

Thank you very much for your help!

1 Like