路由视图

<elf-router-view> 渲染当前路由选中的组件。它支持默认和命名视图、嵌套层级、props、作用域插槽与内置页面过渡 class。

默认出口与嵌套出口

根应用通常在深度 0 放置默认视图：

<elf-router-view></elf-router-view>

嵌套路由时，在父页面中放置子出口。如果布局本身并不是由根出口渲染，则显式设置 depth="1"：

<!-- settings-layout -->
<nav>...</nav>
<elf-router-view depth="1"></elf-router-view>

命名视图

使用 components 的路由记录可以填充多个出口。无 name 的出口读取 default，name="aside" 的出口读取 aside。

{
  path: "/reports",
  components: {
    default: () => import("../pages/report-page"),
    aside: () => import("../pages/report-aside")
  }
}

<main><elf-router-view></elf-router-view></main>
<aside><elf-router-view name="aside"></elf-router-view></aside>

通过插槽读取已渲染的路由

默认作用域插槽接收 Component（也可写作 component）、route、record、props、depth 与 name。当页面外壳需要插入加载/错误边界，或自行选择元素包装结构时很有用。

<elf-router-view>
  <template #default="{ Component, route, props }">
    <section class="page" :data-route="${route.name}">
      <Component ...${props}></Component>
    </section>
  </template>
</elf-router-view>

页面属性应通过路由记录的 props 配置提供，插槽中的 props 会暴露相同的结果。命名视图使用以视图名为键的 props map。

页面过渡

在出口上设置 transition 和可选的时长。替换页面时，路由器会按过渡名称添加 enter/leave class。

<elf-router-view transition="fade" duration="200"></elf-router-view>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

懒加载路由模块会跨 RouterView 缓存。模块可以默认导出页面组件，或只导出一个可识别的组件。