导航

默认情况下，在嵌入的 Activepieces 实例中导航不会影响客户端的浏览器历史记录或查看的 URL。Activepieces 只提供一个处理程序，在 iframe 中的每次路由变化时触发。

自动同步 URL

您可以在配置 SDK 时使用以下代码段，该代码段将实现一个处理程序，将 Activepieces iframe 与您的浏览器同步：

const instanceUrl = 'YOUR_INSTANCE_URL';
const jwtToken = 'YOUR_GENERATED_JWT_TOKEN';
const containerId = 'YOUR_CONTAINER_ID';
activepieces.configure({
  instanceUrl,
  jwtToken,
  embedding: {
    containerId,
    builder: {
      disableNavigation: false,
      hideFlowName: false
    },
    dashboard: {
      hideSidebar: false
    },
    hideFolders: false,
    navigation: {
      handler: ({ route }) => {
        // route 可能包含末尾的搜索参数
        if (!window.location.href.endsWith(route)) {
          window.history.pushState({}, "", window.location.origin + route);
        }
      }
    }
  },
});

window.addEventListener("popstate", () => {
  const route = activepieces.extractActivepiecesRouteFromUrl({ vendorUrl: window.location.href });
  activepieces.navigate({ route });
});

Navigate 方法

如果您使用 activepieces.navigate({ route: '/flows' })，这将告诉嵌入式 SDK 导航到何处。

以下是 SDK 可以导航到的路由列表：

导航到初始路由

您可以在使用 configure SDK 初始化后调用 navigate 方法：

const flowId = '1234';
const instanceUrl = 'YOUR_INSTANCE_URL';
const jwtToken = 'YOUR_GENERATED_JWT_TOKEN';
activepieces.configure({
	instanceUrl,
	jwtToken,
}).then(() => {
	activepieces.navigate({
		route: `/flows/${flowId}`
	})
});