unplugin-vue-router-命名视图 (Named Views)这个特性允许你为同一个 URL 路径同时渲染

这个特性允许你为同一个 URL 路径同时渲染多个不同的组件到页面上不同的位置。

想象一下你的页面布局比较复杂，比如：

有一个主要的内容区域。
旁边还有一个侧边栏。
可能还有一个页脚区域。

你希望当用户访问某个 URL（比如网站首页 /）时：

主要内容区域显示一个组件（比如 HomePage.vue）。
侧边栏显示另一个独立的组件（比如 SidebarInfo.vue）。

命名视图 (Named Views) 就是 Vue Router 提供的一种实现这种需求的机制。它允许你在父组件的模板中放置多个 <router-view> 标签，并通过 name 属性来区分它们。

unplugin-vue-router 如何通过文件命名实现命名视图：

unplugin-vue-router 巧妙地利用了文件命名约定来自动配置 Vue Router 的命名视图。

约定： 在文件名后面加上 @ 符号和一个自定义的名称。
- 例如：src/pages/index@aux.vue
含义： 这个 @<name> 后缀告诉 unplugin-vue-router：
- 这个 index@aux.vue 组件不是渲染到默认的 <router-view /> 插槽中。
- 它应该渲染到父组件模板中名为 aux 的 <router-view> 插槽里，即 <router-view name="aux" />。

生成的路由配置：

对于文件 src/pages/index@aux.vue，它会自动生成类似下面这样的 Vue Router 路由配置：

{
  path: '/', // 因为文件名是 index 开头，所以路径是根路径 '/'
  component: { // 注意：component 属性变成了一个对象！
    // 'aux' 这个 key 来自于文件名中的 @aux
    // 值是对应的组件
    aux: () => import('src/pages/index@aux.vue')
  }
}

这个 component 对象里的 key（例子中的 aux）直接对应 <router-view> 的 name 属性。

关于默认视图 (Default View)：

什么是默认视图？ 就是你在模板里写的那个没有 name 属性的 <router-view />。
文件命名？ 对应的是没有 @<name> 后缀的普通页面文件。比如 src/pages/index.vue。
路由配置中的表示？ 在 component 对象中，它对应的 key 是 default。
重要说明： 你不需要把默认视图文件命名为 index@default.vue。unplugin-vue-router 会自动处理。只要有一个普通的 index.vue 文件，它就会被视为 default 视图。
- 所以，如果你有 index@aux.vue 和 index.vue 这两个文件，最终生成的路由配置效果等同于：
```
{
  path: '/',
  component: {
    // 'default' key 对应 index.vue (普通文件)
    default: () => import('src/pages/index.vue'),
    // 'aux' key 对应 index@aux.vue (带 @aux 后缀)
    aux: () => import('src/pages/index@aux.vue')
  }
}
```

总结：

unplugin-vue-router 的命名视图文件约定 (@<name>) 是一种便捷的方式，让你能够：

通过特殊的文件命名 (page@viewName.vue)，告诉路由系统这个组件应该渲染到哪个命名的 <router-view name="viewName"> 插槽中。
普通的页面文件 (page.vue) 自动对应到默认的 <router-view /> 插槽（在路由配置中是 default key）。
这样可以在同一个 URL 下，将不同的组件渲染到页面的不同 <router-view> 位置，实现更复杂的页面布局。

使用场景示例 (在父组件/布局组件模板中):

<template>
  <div class="layout">
    <header>...</header>
    <main>
      <!-- 默认视图出口 -->
      <router-view />
    </main>
    <aside>
      <!-- 命名为 'aux' 的视图出口 -->
      <router-view name="aux" />
    </aside>
    <footer>...</footer>
  </div>
</template>

当用户访问 / 时，index.vue 的内容会渲染到 <router-view /> 的位置，而 index@aux.vue 的内容会渲染到 <router-view name="aux" /> 的位置。