vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.74k stars 1.15k forks source link

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

Closed AntonioDell closed 2 months ago

AntonioDell commented 2 months ago

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

posva commented 2 months ago

This is the intended behavior, it allows to show the route without its children and it's more flexible

AntonioDell commented 2 months ago

@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

posva commented 2 months ago

Totally, added to https://github.com/vuejs/router/discussions/2068