unplugin-vue-router-嵌套路由 (Nested Routes)unplugin-vue-router

unplugin-vue-router 通过一种特定的文件和文件夹命名约定，能够自动为你创建 Vue Router 中的嵌套路由结构。嵌套路由允许你将一个路由的组件渲染到另一个路由组件内部的 <router-view> 中，常用于创建具有公共布局或父级视图的页面结构。

核心规则：同名文件与文件夹

"Nested routes are automatically defined by defining a .vue file alongside a folder with the same name."

这句话是关键：当你同时创建一个 .vue 文件和一个与该文件同名的文件夹时，嵌套路由就自动形成了。

这个 .vue 文件将成为父路由 (Parent Route) 的组件。
这个同名文件夹内的所有 .vue 文件将成为该父路由下的子路由 (Child Routes)。

示例解读：

文档中给出了一个基于 users 的例子。

情况一：存在 users.vue 文件和 users/ 文件夹

文件结构：

src/pages/
├── users/           # 同名文件夹
│   └── index.vue    # 子路由组件
└── users.vue        # 与文件夹同名的 .vue 文件 (父路由组件)

生成的路由配置：

const routes = [
  {
    path: '/users', // 路径由 users.vue 和 users/ 决定
    // 父路由的组件是 users.vue
    component: () => import('src/pages/users.vue'),
    children: [ // users/ 文件夹下的内容成为子路由
      {
        // path: '' 表示匹配 /users 这个路径本身
        path: '',
        // 子路由的组件是 users/index.vue
        component: () => import('src/pages/users/index.vue')
      },
      // 如果 users/ 文件夹下还有其他文件，如 details.vue
      // { path: 'details', component: () => import('src/pages/users/details.vue') }
    ],
  },
]

发生了什么？
1. unplugin-vue-router 发现了 users.vue 和 users/ 文件夹并存。
2. 它创建了一个路径为 /users 的路由记录。
3. 它将 src/pages/users.vue 设置为这个父路由的 component。这意味着当用户访问 /users 或其子路径时，users.vue 会先被渲染。
4. 关键点： src/pages/users.vue 这个父组件的模板必须包含一个 <router-view> 标签，否则子路由 (users/index.vue 等) 的内容将无处渲染。
5. users/ 文件夹内的 index.vue 文件被定义为一个子路由，其 path 为空字符串 ('')，表示当 URL 正好是 /users 时，users/index.vue 的内容会被渲染到 users.vue 的 <router-view> 内部。

情况二：只有 users/ 文件夹，没有 users.vue 文件

文件结构：

src/pages/
└── users/
    └── index.vue

生成的路由配置：

const routes = [
  {
    path: '/users', // 路径仍然由 users/ 文件夹决定
    // 注意：这里没有顶层的 component 属性了！
    children: [
      {
        path: '', // 仍然匹配 /users 本身
        component: () => import('src/pages/users/index.vue')
      },
      // ... 其他可能的子路由
    ],
  },
]

发生了什么？
1. unplugin-vue-router 只发现了 users/ 文件夹。
2. 它仍然创建了一个路径为 /users 的路由记录。
3. 但是，由于缺少 src/pages/users.vue 这个对应的父组件文件，所以这个路由记录没有顶层的 component 属性。
4. users/ 文件夹内的文件仍然被视为子路由。
5. 渲染行为： 当用户访问 /users 时，由于父路由没有指定组件，Vue Router 会查找更上一层的路由记录（比如根路由 / 或 App.vue 中定义的布局）中的 <router-view>，然后直接将 users/index.vue 渲染到那个 <router-view> 中。也就是说，这种情况下没有一个由 users.vue 提供的特定于 /users 路径的中间布局层。

命名注意事项：

"Note the folder and file's name users/ could be any valid naming like my-[id]-param/."

这表示上述规则不仅适用于静态名称如 users，也适用于包含动态参数的名称。例如，如果你有 my-[id]-param.vue 文件和 my-[id]-param/ 文件夹，它们也会形成嵌套关系，父路径会是 /my-:id-param。

总结：

unplugin-vue-router 通过检查是否存在同名的 .vue 文件和文件夹来自动创建嵌套路由。
如果两者都存在，.vue 文件成为父路由组件（必须包含 <router-view>），文件夹内的内容成为子路由。
如果只存在文件夹而没有同名的 .vue 文件，则会创建一个没有父组件的路由记录，其子路由会渲染到上一级的 <router-view> 中。
这个机制让你能够轻松地为一组相关的页面（如用户管理下的所有页面）创建一个共享的父布局或父视图。