vuejs / router

🚦 The official router for Vue.js

Home Page:https://router.vuejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Route Grouping

aryankarim opened this issue · comments

What problem is this solving

Having route grouping helps:

  • organize routes in objects.
  • helps applying meta data easier
  • helps with debugging in large application

Proposed solution

This code below currently does not work. The 404 page is not being found be the router since it is a child.

Not having to put path and component the vue router should understand that this is just a group not a prefixed/nested child.

reateRouter({
  routes: [
    {
      name: "public",
      meta: { layout: "Public", public: true },
      children: [
        {
          path: "/home",
          name: "Home",
          component: () => import("../path/to/Home.vue"),
        },
        {
          path: "/login",
          name: "Login",
          component: () => import("../path/to/Login.vue"),
        },
        {
          path: "/:pathMatch(.*)*",
          component: () => import("../path/to/404.vue"),
        },
      ],
    },
  ],
});

Describe alternatives you've considered

No response

You just need to add the path. In the root, it's /. The name can (and should) be removed as you don't want to visit a route group.