data does not reset when path is empty

[Michael Riezler]

Description

I basically have the same set up like this, but with the subroute inside another page.

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>
<app-route
    route="{{subroute}}"
    pattern="/:id"
    data="{{subrouteData}}">
</app-route>

I wanted to show an overview page of items when there is no id present and a detailed view when I click on an item.

Expected outcome

  route = { path: '/overview/' }
  subroute = { path: '' }
  subrouteData = {}

  // after I tap on item
  route = { path: '/overview/1' }
  subroute = { path: '/1' }
  subrouteData = { id: '1' }

  // when I go back
  route = { path: '/overview/' }
  subroute = { path: '' }
  subrouteData = { }

Actual outcome

  route = { path: '/overview/' }
  subroute = { path: '' }
  subrouteData = {}

  // after I tap on item
  route = { path: '/overview/1' }
  subroute = { path: '/1' }
  subrouteData = { id: '1' }

  // when I go back
  route = { path: '/overview/' }
  subroute = { path: '' }
  subrouteData = { id: '1' }

Question

I was looking at the source code and saw that when you reset the properties of the element, that you have
commented out the line to reset the data and now I'm wondering if there is a reason behind this?
Because when I uncomment it, it works just fine.

[Brett Postin]

+1
Some explanation here.

What would be the best workaround?

[H3dz]

I also wanted a default page and I had the same problem.

To solve it I added an observer 'propertyRouteDataChanged(route.path)' and
force the value to my default page,

propertyRouteDataChanged() {
      if (this.route.path == '') {
        this.set('routeData.page', 'index');
      }
}

[Pascal Gula]

same issue here... and applying a similar workaround as @H3dz ...