How do i add `name` to a `redirect` URL in vue-router

Question

Here is my router setup from the Vue project

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      redirect: "/dashboard",
    },
    {
      path: "/dashboard",
      name: "dashboard-page",
      component: () => import("@/views/Pages/AppDashboard.vue"),
    },
    {
      path: "/customer/",
      name: "customer-page",
      component: () => import("@/views/Pages/CustomerDashboard.vue"),
      children: [
        {
          path: "",
          redirect: "/customer/list",
        },
        {
          path: "list",
          name: "customer-list",
          component: () =>
            import("@/views/Pages/SubPages/Customers/CustomerTable.vue"),
        },
        {
          path: "add",
          name: "add-customer",
          component: () =>
            import("@/views/Pages/SubPages/Customers/CustomerForm.vue"),
          props: { type: "New" },
        },
        {
          path: ": id",
          name: "edit-customer",
          component: () =>
            import("@/views/Pages/SubPages/Customers/CustomerForm.vue"),
          props: { type: "Edit" },
        },
      ],
    },
  ],
});

export default router;

So whenever I don't add a name to the redirect URL in children of customer I get the following dev-warning

[Vue Router warn]: The route named "customer-page" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.

However, after I add name: default-redirect to that child, all children components disappear and I get a blank output in the router-view area.

All I am trying to do here is that whenever anyone lands on just /customer the page should redirect to /customer/list.

Is this a Bug OR am I doing something wrong here?

Here is the Link to https://codesandbox.io/ with the minimum required code that will give the same exact error when you try to run in chrome. Try adding/removing the name:default-redirect in /customer route

Answer 1

So finally after a long troubleshooting i found what i was doing wrong all i had to do was move the name: "customer-page", from the parent to the child

so what was expected was something like this

{
      path: "/customer/",
      component: () => import("@/views/Pages/CustomerDashboard.vue"),
      children: [
        {
          path: "",
          name: "customer-page",
          redirect: "/customer/list",
        },
        {
          path: "list",
          name: "customer-list",
          component: () =>
            import("@/views/Pages/SubPages/Customers/CustomerTable.vue"),
        },
        {
          path: "add",
          name: "add-customer",
          component: () =>
            import("@/views/Pages/SubPages/Customers/CustomerForm.vue"),
          props: { type: "New" },
        },
        {
          path: ": id",
          name: "edit-customer",
          component: () =>
            import("@/views/Pages/SubPages/Customers/CustomerForm.vue"),
          props: { type: "Edit" },
        },
      ],
    },

All i had to do was move the name prop from the root

      path: "/customer/",
      component: () => import("@/views/Pages/CustomerDashboard.vue"),

to the empty path redirection

        {
          path: "",
          name: "customer-page",
          redirect: "/customer/list",
        },