bug: catchall doesn't work recursively due to children structure

[lrstanley]

Given what I'm used to with vite-plugin-pages, I generally have one catch-all at the top level of the routes folder, which is meant to catch all unknown routes, regardless of what route a user puts in.

Given this snippet from the readme:

---

Catch all / 404 Not found route

To create a catch all route prepend 3 dots (...) to the param name, e.g. src/pages/[...path].vue will create a route with the following path: /:path(.*). This will match any route. Note this can be done inside a folder too, e.g. src/pages/articles/[...path].vue will create a route with the following path: /articles/:path(.*).

---

Specifically:

This will match any route.

Doesn't seem like that's the case with the current implementation. Given the following route folder structure:

$ tree src/pages/
src/pages/
├── [...catchall].vue
├── articles
│   └── [id].vue
└── index.vue

The following routes would trigger the catch-all:

• /foo
• /foo/bar
• /foo/bar/baz

The following would work as expected, and load the appropriate components/routes:

• /
• /articles/<id>

However, the following will not, and will match essentially no route (resulting in an empty component tree):

• /articles
• /articles/

The above don't trigger catchall, or really any route. For example, I have an app that simply uses RouterView as the "root" app component. When I set up the pages like shown above, this is what the component tree looks like for /articles/<id>:

And /foo/bar:

Aaand /articles/:

Looks like this is due to the children functionality, where if you don't have an index.vue (which shouldn't be required for a sub-folder), there is no associated component:

[
  {
    "path": "/",
    "name": "home"
  },
  {
    "path": "/:catchall(.*)",
    "name": "/[...catchall]"
  },
  {
    "path": "/articles",
    "children": [
      {
        "path": ":id",
        "name": "/articles/[id]"
      }
    ]
  }
]

This is not ideal for a few reasons:

• Have to either duplicate catch-alls all over the place (putting one in pages/articles/[...catchall].vue works)
• Have to have a pages/articles/index.vue for all similar routes. Also not ideal.

I have setup a repro repo to better explain the scenario, which doesn't include any special wrapping libraries for routes (pulled from the playground with modifications to simplify/clean up):

https://github.com/lrstanley/bug-vue-router-empty-param

[posva]

Nice catch! I improved this in Vue Router by making those records non-accessible by path

[Antoine340]

Just a quick note for anyone having this issue while using unplugin-vue-layouts

Project Structure

layouts/
  └── default.vue
pages/
  ├── index.vue
  ├── [...path].vue
  └── delivery/
      └── ongoing.vue

Issue

The default layout (default.vue) automatically applies to /delivery, which creates an unwanted route at /delivery. This occurs even though only /delivery/ongoing should be a valid route.

Fix

I resolved this by entirely removing the default layout. However, this might not be ideal for projects requiring a base layout.

Has anyone found a more elegant solution that keeps the default layout while preventing unwanted route generation?

Not sure if I should post this here on in unplugin-vue-layouts repo