Skip to content

Default child not shown when using router-link with name instead of path #2213

Closed as not planned
@AntonioDell

Description

@AntonioDell

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions