在日常项目中，常常会遇到多视图（Multi-View）标签的场景，用户在切换不同视图时，可能需要刷新当前活动标签内的视图数据或状态。本文将详细解析下面这段代码，并说明如何利用它在视图切换时刷新对应的视图。
下列代码写在ss-boot里面的main.ts
import { VueOioProvider } from '@kunlun/dependencies';
import { delay } from 'lodash-es';
VueOioProvider(
{
... 自己的配置
},
[
() => {
setTimeout(() => {
subscribeRoute(
(route) => {
const page = route.segmentParams.page || {};
// 如果不是表格类型，则不刷新(根据自己的需求判断)
if (page.viewType !== ViewType.Table) {
return;
}
const { model, action } = page;
const multiTabsManager = MultiTabsManager.INSTANCE;
delay(() => {
const tab = multiTabsManager.getActiveTab();
if (tab?.key && tab.stack.some((s) => s.parameters?.model === model && s.parameters?.action === action)) {
multiTabsManager.refresh(tab.key);
}
}, 200);
},
{ distinct: true }
);
}, 1000);
}
]
);1. VueOioProvider 及其作用
首先，代码通过 VueOioProvider 初始化应用程序或组件，并传入两部分参数：
- 配置对象：可以根据实际业务需求进行自定义配置；
- 回调函数数组：这里传入了一个匿名函数，用于在应用初始化后执行额外的逻辑
2. 延时执行与路由监听
在回调函数中，使用了 setTimeout 延时 1000 毫秒执行，目的通常是为了确保其他组件或全局状态已经初始化完毕，再开始进行路由监听。
随后，代码调用 subscribeRoute 来监听路由的变化。subscribeRoute 接收两个参数：
- 回调函数：每次路由变化时都会触发该函数，并将最新的 route 对象传递给它；
- 配置对象：此处使用
{ distinct: true }来避免重复的触发，提高性能。
3. 判断视图类型
在路由回调函数内部，首先通过 route.segmentParams.page 获取当前页面的配置信息。通过判断 page.viewType 是否等于 ViewType.Table，代码可以确定当前视图是否为“表格类型”：
- 如果不是表格类型：则直接返回，不做刷新操作；
- 如果是表格类型：则继续执行后续刷新逻辑。
这种判断机制保证了只有特定类型的视图（例如表格）在切换时才会触发刷新，避免了不必要的操作
4. 多视图标签的刷新逻辑
当确认当前视图为表格类型后，从 MultiTabsManager 中获取当前活动标签：
MultiTabsManager.INSTANCE.getActiveTab() 返回当前活动的标签对象；
如果 key 存在，并且激活的标签内部存储的action跟url一致， 就调用 multiTabsManager.refresh(key) 方法来刷新当前标签内的视图。
Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/20662.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
