Transition plan for routes when parameters do not change

vNext
1

Using @aurelia/router-lite how can i get a route to reload if it uses the same component? In the documentation it states that “router-lite uses replace when the parameters are changed and none otherwise”

@route({
  routes: [
    {
      path: 'route-1', 
      component: MyComponent, 
    },
   {
      path: 'route-2', 
      component: MyComponent, 
    }
 ]
}

<a load="route-1"> Route 1 </a>
<a load="route-2"> Route 2 </a>

The canLoad hook in never called when navigating from route-1 to route-2

Adding

@route({
  transitionPlan: 'replace' // or invoke-lifecycles,
 ...

does not seem to change anything.

Here is an example:

In the example navigating from ce-1 to ce-2 or ce2 to ce-1 does not do anything.

2

Hi @ivan, thank you for reporting this. Seems like an oversight to me. I will try to push a fix.

2 Likes
3

Super. Thanks @Sayan751

1 Like
4

@Sayan751 I see there is a fix: fix(router-lite): replace transition plan for same component with different paths by Sayan751 · Pull Request #1982 · aurelia/aurelia · GitHub.

Thanks for this.

However, the above stackblitz example still does not reflect the correct behaviour. It’s using the dev branch of aurelia, so it should include the newest changes. Is this correct?

Navigating from ce-1 to ce-2 or ce2 to ce-1 in the example does not do anything. This should trigger the lifecycle functions?

5

Your stackblitz example used very old dependencies, I updated it, but nevertheless it’s still not working:

If I additionally comment out the route id, it’s working:

@route({
  transitionPlan: 'replace',
  routes: [
    {
      //id: 'ce1',     <---------
      path: ['', 'ce1', 'ce2', 'ce1/:id'],
      component: CeOne,
    },
  ],
})

Maybe it’s not a good idea to set the route-id to the same value as the path? Perhaps, @Sayan751 could help here?

6

Cool. Thanks for taking a look.

I also noticed that right after the page loads, navigating from ce-1 to ce-2 or ce2 to ce-1 does not work. It only starts working after going to ce-one/1 first.

2024-06-05 14-26-01.2024-06-05 14_27_49.2024-06-05 14_29_10

7

@ivan @elitastic It happens because of this part. When transitioning from/to empty path, it seemed like a sensible choice to perform no transition. Note that in this case, the current component and the next component are one and the same.

The workaround is to add a redirection for the empty path instead. Here is a working example.

1 Like