witRouterView 路由视图组件

witRouterView 是一个增强型路由视图组件，集成了页面切换动画、页面缓存管理、进度条显示等功能，支持动态更新页面 meta 信息，适用于需要优化用户体验的单页应用。

用法实例

<template>
  <div>
    <!-- 路由视图组件 -->
    <witRouterView />
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件会自动处理路由渲染
</script>

API

组件

组件名	描述
witRouterView	增强型路由视图组件，支持页面缓存和切换动画

属性

属性名	类型	默认值	描述
-	-	-	该组件无需配置属性

方法

方法名	描述	参数类型
-	-	-

事件

事件名	描述	参数
-	-	-

功能特性

路由视图渲染

• 基于 Vue Router 的 router-view 组件
• 支持动态组件渲染
• 自动处理路由参数变化

页面切换动画

• 支持配置页面切换过渡效果
• 使用 transition 组件实现动画
• 过渡模式为 out-in（先出后进）
• 动画名称从主题配置中获取

页面缓存管理

• 集成 keep-alive 实现页面缓存
• 支持配置缓存页面最大数量
• 自动从标签页管理中获取需要缓存的页面
• 支持排除不需要缓存的页面（通过 meta.noKeepAlive 配置）

进度条显示

• 集成 nprogress 进度条
• 页面切换时自动显示/隐藏进度条
• 可通过主题配置控制是否显示

页面 meta 信息

• 使用 @vueuse/head 管理页面头部信息
• 自动更新页面 description
• 支持动态设置页面标题等 meta 信息

页面重载功能

• 支持通过事件触发页面重载
• 重载时清除指定页面的缓存
• 重载后自动恢复页面状态

配置说明

缓存相关配置

• keepAliveMaxNum：缓存页面最大数量，从配置文件中获取
• meta.noKeepAlive：路由元信息，设置为 true 时不缓存该页面

主题相关配置

• theme.pageTransition：页面切换动画名称
• theme.showProgressBar：是否显示进度条

TIP

1. 组件会自动从标签页管理中获取需要缓存的页面列表。
2. 页面重载功能可通过订阅 reload-router-view 事件触发。
3. 进度条显示状态可在主题配置中控制。
4. 页面切换动画名称可在主题配置中自定义。
5. 组件支持通过路由元信息 noKeepAlive 排除不需要缓存的页面。