命名视图 ​

在 uni-simple-router 中，命名视图（Named Views）允许我们在同一个路由中同时渲染多个视图，以实现更灵活和复杂的页面布局。通过命名视图，我们可以在一个页面中定义多个区域，每个区域可以渲染不同的组件或内容。

默认命名视图 ​

当你在 uni-simple-router 中导入的组件设置了 pageType: 'top' 并且该组件对应的路由是一级路径（即路径以 / 开头），那么该组件将继承 uni-app 的默认配置，并在根组件的 default 视图中被渲染。

这意味着该组件将成为应用程序的顶级页面，并且具有 uni-app 默认的页面配置和行为。它将在应用程序的主视图中显示，并且可以使用 uni-app 提供的默认标题栏、导航栏和其他页面相关的功能。

通过设置 pageType: 'top'，你可以将该组件设置为应用程序的入口页面或顶级导航页面，它将在应用程序启动或导航到该路由时首先显示。

需要注意的是，这种继承 uni-app 默认配置的行为仅适用于一级路径的组件，并且需要将其导入到 uni-simple-router 的路由表中。其他非一级路径的组件或使用自定义的配置方式导入的组件将不会继承 uni-app 的默认配置。

import {
  __dynamicImportComponent__
} from '@/uni-simple-router'

// 导入组件
const MainContent = __dynamicImportComponent__(`@/pages/mainContent.vue`,{
  pageType:`top`
})

const routes = [
  {
    path: '/dashboard',
    component:MainContent
  }
]

嵌套命名视图 ​

当需要创建复杂的布局并使用嵌套视图时，我们可以使用命名视图（Named Views）的方式。这种方式适用于在一个页面中同时渲染多个不同的视图。

让我们以一个设置面板为例进行说明：

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

• Nav 只是一个常规组件。
• UserSettings 是一个视图组件。
• UserEmailsSubscriptions 、 UserProfile 、 UserProfilePreview 是嵌套的视图组件。

在 UserSettings 组件的 <template> 部分中使用 <simple-router-view> 组件，并为其指定一个唯一的名称，例如： settings 。这样就创建了一个命名视图。

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar />
  <!-- UserEmailsSubscriptions / UserProfile 将会渲染到这里  -->
  <simple-router-view />
  <!-- UserProfilePreview 将会渲染到这里  -->
  <simple-router-view name="helper" />
</div>

然后，在路由表中，你可以定义一个与该命名视图对应的路由，并将组件与该路由进行关联。同时，确保该路由是嵌套在父级路由下的。

import {
  __dynamicImportComponent__
} from '@/uni-simple-router'

const UserEmailsSubscriptions = __dynamicImportComponent__(`@/pages/UserEmailsSubscriptions.vue`)
const UserProfile =  __dynamicImportComponent__(`@/pages/UserProfile.vue`)
const UserProfilePreview = __dynamicImportComponent__(`@/pages/UserProfilePreview.vue`)

const routes = [
  {
    path: '/settings',
    // 你也可以在顶级路由就配置命名视图
    component: UserSettings,
    children: [
      {
        path: 'emails',
        component: UserEmailsSubscriptions
      }, 
      {
        path: 'profile',
        components: {
          default:UserProfile,
          helper: UserProfilePreview
        }
      }
    ]
  }
]

在上述示例中，我们将 UserEmailsSubscriptions UserProfile UserProfilePreview 组件关联到了 /settings/emails 及 /settings/profile 路由，并指定了命名视图 helper 。这样，在父级组件 UserSettings 的模板中，我们可以使用 <simple-router-view> 组件来渲染 UserEmailsSubscriptions UserProfile UserProfilePreview 组件，并确保将其命名为 helper 及 default。