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.