Default child not shown when using router-link with name instead of path
AntonioDell opened this issue · 3 comments
Reproduction
https://github.com/AntonioDell/vue-router-name-bug
Steps to reproduce the bug
- Download repo and install dependencies with
pnpm install
- Run the repo with
pnpm dev
- Click on link
About (navigation by path to "/about")
- See that a the child route named
about.child
with the componentAboutChildView.vue
is shown - Click on link
About (navigation by name)
- See that the child route named
about.child
with the componentAboutChildView.vue
is NOT shown
Expected behavior
I would expect navigation by name to behave exactly as navigation by path. The default child route with path path: ""
should be shown regardless if I use to="/about"
or :to="{name: 'about'}"
.
Actual behavior
The default child route with path path: ""
is not shown, when defining a RouterLink like this:
<RouterLink :to="{ name: 'about' }">About</RouterLink>
with a router definition like this:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
children: [
{
path: "",
name: "about.child",
component: () => import("../views/AboutChildView.vue"),
},
],
},
],
});
Additional information
EDIT: I also noticed, that the links actually look the same in the DOM. So this makes it more apparent, that this is a bug.
This is the intended behavior, it allows to show the route without its children and it's more flexible
@posva
I can understand that reasoning, but this is not really clear from the docs. Maybe a hint to this behavior would be nice to add to f.e. https://router.vuejs.org/guide/essentials/named-views.html