小海牛用户3330
集成海牛低代码页面
输入“/”快速插入内容
集成海牛低代码页面
集成海牛低代码页面
用户3330用户33302025年11月24日修改
渲染低代码页面
海牛低代码页面输出的是编译后的产物，可直接通过nginx部署，得到一个访问链接，可以通过微前端(qiankun)加载到项目中。
1.
新建render文件(lowcodeRender.vue)
代码块
<script lang="ts" setup>
import { loadMicroApp } from 'qiankun'
import { useRouter } from 'vue-router'
const elementRef = ref(null)
const microContainer = ref()
const router = useRouter() // 路由对象
function loadApp() {
if (microContainer.value) {
microContainer.value.unmount()
microContainer.value = null
}
const container = elementRef.value
if (!container) {
return
}
const route = useRoute()
// 低代码页面访问链接
const entry = route.meta?.lowcodePageUrl
if (!entry) {
return
}
const microApp = {
name: route.path,
entry,
container,
props: {
extVars: {
getRouter: () => {
return () => ({
reload: () => window.location.reload(),
redirect: ({ url }) => router.replace(url),
back: () => router.back(),
forward: () => router.forward(),
pushState: ({ state, title, url }) => router.push(url),
openTab: ({ url, title }) => window.open(url, title || '_blank'),
})
},
},
},
}
window.MYBRICKS_HOST = {
// 多域名的默认域名
default: location.origin,
// 校验权限
checkPermission(key: string) {
return true
}
}
microContainer.value = loadMicroApp(microApp, { sandbox: true })
}
onMounted(() => {
loadApp()
})
onUnmounted(() => {
if (microContainer.value) {
microContainer.value.unmount()
microContainer.value = null
}
})
</script>
<template>
<div ref="elementRef">
加载中...
</div>
</template>
<style>
</style>