Enhance the writing method of non-nested routes

[xiankq]

In the current version, the naming convention of users.create.vue does implement nested routing without nesting layouts. The file structure might look like this:

src/pages/
├── users/
│   ├── [id].vue
│   └── index.vue
└── users.vue
└── users.create.vue

However, in actual projects, routes similar to users.create.vue tend to be numerous, and users.create.vue itself might contain numerous abstract components. Having all these files at the same level can hinder maintenance.

To address this, a more organized structure could be adopted, such as:

src/pages/
├── users/
│   ├── [id].vue
│   ├── index.vue
│   └── .create.vue
└── users.vue

Or, a more conventional approach would be to use a folder to group related files:

src/pages/
├── users/
│   ├── [id].vue
│   ├── index.vue
│   └── .create/index.vue
└── users.vue

In the second option, with src/pages/users/.create/index.vue, abstract components can be directly placed within the .create (or simply create to avoid unconventional naming) folder, improving maintainability and clarity.

This approach allows for better organization and separation of concerns, especially as the project grows and more routes and components are added.

[posva]

However, in actual projects, routes similar to users.create.vue tend to be numerous, and users.create.vue itself might contain numerous abstract components. Having all these files at the same level can hinder maintenance.

This sounds like it would be fixed with #448

Otherwise, what you are proposing is to treat files that start with . as non nested? On first thought, it sounds like a nice idea

[xiankq]

Yes, files or folders starting with a . are ignored in nesting at the same level, and #448 looks like two different things

src/pages/users.vue
src/pages/users/index.vue
src/pages/users/.create.vue
src/pages/users/.[id].vue
src/pages/users/.detail/index.vue

[
  {
    path: '/users',
    component: () => import('src/pages/users.vue'),
    children: [
      { path: '', component: () => import('src/pages/users/index.vue') },
    ],
  },
  {
    path: '/users/create',
    component: () => import('src/pages/users/.create.vue'),
  },
  {
    path: '/users/:id',
    component: () => import('src/pages/users/.[id].vue'),
  },
  {
    path: '/users/detail',
    children: [
      { path: '', component: () => import('src/pages/users/.detail/index.vue') },
    ],
  },
]