56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
|
<div class="container mx-auto p-4">
|
|
<h1 class="text-2xl font-bold mb-4">Contact page (Host)</h1>
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<Suspense>
|
|
<template #default>
|
|
<RemoteContactRouter label="propsFromHost" @increment="handleLog" />
|
|
</template>
|
|
<template #fallback>
|
|
<div>Loading remote component...</div>
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
__federation_method_getRemote as getRemote,
|
|
__federation_method_setRemote as setRemote,
|
|
__federation_method_unwrapDefault as unwrapModule,
|
|
type IRemoteConfig
|
|
} from "virtual:__federation__";
|
|
|
|
// 公共的 remote 配置
|
|
const commonRemoteConfig: Partial<IRemoteConfig> = {
|
|
format: "esm", // 取决于你的 remoteEntry.js 构建方式
|
|
from: "vite"
|
|
};
|
|
|
|
const loadRemoteContactRouter = async () => {
|
|
// 运行时注册 remote
|
|
setRemote("remote", {
|
|
...commonRemoteConfig,
|
|
url: "http://localhost:3003/remote/_nuxt/remoteEntry.js"
|
|
});
|
|
|
|
// 获取远程模块
|
|
const remoteModule = await getRemote("remote", "./RemoteContactRouter");
|
|
|
|
// 解包 default 导出。
|
|
// 如果远程模块是命名导出，例如 `export const RemoteContactRouter = ...`
|
|
// 那么你应该使用 `return remoteModule.RemoteContactRouter;`
|
|
return await unwrapModule(remoteModule);
|
|
};
|
|
|
|
// 3. 使用 defineAsyncComponent 来加载组件
|
|
const RemoteContactRouter = defineAsyncComponent(loadRemoteContactRouter);
|
|
|
|
const handleLog = (count: number) => {
|
|
console.log("count: ", count);
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|