0

Given the following route:

{
path: '/detail/:someId',
component: SomeDetailComponent,
name: 'some-detail',
children: [
  {
    path: 'dashboard',
    component: DashboardComponent,
    name: 'dashboard'
  },
  {
    path: '',
    redirect: { name: 'dashboard' }
  },
  {
    path: 'other',
    component: OtherComponent,
    name: 'other'
  }
]

},

Why does this work (the dashboard component is visible):

this.$router.push(`/detail/123/`);

But this doesn't:

this.$router.push({name: 'some-detail', params: { someId: 123 }});

In one case, the URL gets a trailing slash while in the other it doesn't. I've read somewhere in the docs that this is a breaking change coming from Vue2. See: named-children-routes-with-an-empty-path-no-longer-appends-a-slash

So the real question here could be: how can I still have my working child navigations (with redirection) while still being able to navigate using the route name, instead of the route url part.

Daan
  • 466
  • 1
  • 8
  • 21

0 Answers0