Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
AntonioDell opened this issue Apr 17, 2024 · 3 comments
Closed

Comments

@AntonioDell
Copy link

AntonioDell commented Apr 17, 2024

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
Copy link
Member

posva commented Apr 17, 2024

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

@posva posva closed this as not planned Won't fix, can't repro, duplicate, stale Apr 17, 2024
@AntonioDell
Copy link
Author

@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
Copy link
Member

posva commented Apr 17, 2024

Totally, added to #2068

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants