vuejs/router

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

  1. Download repo and install dependencies with pnpm install
  2. Run the repo with pnpm dev
  3. Click on link About (navigation by path to "/about")
  4. See that a the child route named about.child with the component AboutChildView.vue is shown
  5. Click on link About (navigation by name)
  6. See that the child route named about.child with the component AboutChildView.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.
grafik

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

Totally, added to #2068