singleSpa记录

最新推荐文章于 2023-02-09 16:33:57 发布

Fmili

最新推荐文章于 2023-02-09 16:33:57 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/Fmili/article/details/111224086

版权

本文档记录了singleSpa的安装过程以及如何配置single-spa-vue.config.js文件，同时介绍了在main.js中引入的步骤。

摘要由CSDN通过智能技术生成

安装single-spa
新建文件config，创建single-spa-vue.config.js

import singleSpaVue from "single-spa-vue"
import App from "../App" (相对路径)

export default (Vue,router,store,i18n)=>{
  let lifecycles=null
  const bootstrap=(props)=>{
 if(!lifecycles){
 lifecycles=singleSpaVue({
 Vue,
 appOptions:{
 el:"#"+props.targetEl+props.name
 render:(h)=>{
 return h(APP)
 },
 router,
 store,
 i18n
 }
 })
}
return lifecycles.bootstrap(props)
}
const mount=(props)=>{
if(!lifecycles){
return Promise.resolve()
}
if(props.targetEl){
  const targetEl=document.getElementById(props.targetEl)
  if(targetEl){
  const myElId=props.targetEl+props.name
  //多加一层，防止字应用节点卸载不完全
  const myElContainerId=myElId+'Container'
  let myElContainer=document.getElementById(myElContainerId)
  if(!myElContainer){
  myElContainer=document.createElement("div")
  //新建加载节点
  myElContainer.setAttribute("id",myElContainerId)
  myElContainer.setAttribute("class","flex-layout")
  targetEl.appendChild(myElContainer)
  }
  let myEl=document.getElementById(myElId)
  if(!myEl){
   myEl=document.createElement("div")
   //新建加载节点
   myEl.setAttribute("id",myElId)
   myEl.setAttribute("class","flex-layout")
   myElContainer.appendChild(myEl)
  }
}else{
conslole.log("子应用挂在的目标节点不存在！！ID："，props.targetEl)
}
}
for(const key in props.store){
 store.state[key]=props.store[key]
}
return lifecycles.mount(props)
}
const unmount=(props)=>{
 if(!lifycycles){
 return Promise.resolve()
}
return lifecycles.unmount(props).then(()=>{
 const targetEl=document.getElementById(props.targetEl)
 if(targetEl){
 const myElContainerId=props.targetEl+props.name+"Container"
 const myElContainer=document.getElementById(myElContainerId)
 if(myElContainer){
 targetEl.removeChild(myElContainer)
}
}
})
}

return{
bootstrap,
mount,
unmount
}
}

3.main.js中引入

import singleSpaConfig from "./config/single-spa-vue.config"
const vueLife=singleSpaConfig(Vue,router,store,i18n)
export const bootstrap=vueLife.bootStrap
export const mount=vueLife.mount
export const unmount=vueList.unmount