qiankun vue 多tag切换问题解决方案

 

qiankun 示例与文档中都只提供了单页面的实例，更加偏向于展示类。而很大一部分需求都是操作类页面。然后就带来了多页签切换的问题。

 

先看效果

 

• 多子应用页签切换。
• 子应用页签切换数据不会刷新。

 

 

实现方式

• 思路
  • 　　 手动加载子应用，自己管理子应用创建，卸载。
  •         提前或计算函数，渲染 DIV 元素
• 关键代码：
  • 　　router.beforeEach 事件
    • 　　新增 登录成功后 首次访问加载导航数据的时候判断是否是 子应用。创建子应用数据字段。　　

MICRO_CONF.push({

  name: v.name.toLowerCase(),
  entry: v.meta.subcomponentAddress,
  container: '#' + v.name.toLowerCase(),
  activeRule: v.path,
   //   父传递给子的数据
  props: {
    data: {
      permission,
      store: undefined,
      request: request
    }
  }
})


新增  手动加载子应用代码

// 判断要跳转的路径是否是 子应用路径const conf = MICRO_CONF.find(item => to.path.indexOf(item.activeRule) !== -// if  const cacheMicro = microList.get(conf.activeRule)

  // 已缓存应用
  if (cacheMicro) {
    next()
    return
  }
  // 未缓存应用
  conf.props.data.store = store
  const micro = loadMicroApp(conf);
  microList.set(conf.activeRule, micro)
  current = conf
  next()
}

到这里手动加载子应用就完成了。

 

 

 

 

 

 

 

 

DIV 元素 必须 先加载的问题 

解决方法

在 layout 页面中新增一个页面

代码如下

<template>
  <div>
    <div
      v-for="tag in this.$MICRO_CONF" :key="tag.name"
      :id="tag.name"
      v-show="isActive(tag.name)"
    >
      {{tag.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: "Son",
  methods: {
    isActive(route) {
      return this.$route.path.indexOf(route) !== -1
    }
  }
}
</script>

大概位置

 

 

 

上面解决了 未找到div 的问题。

• 主应用自身页面 与 子应用共同存在的问题。
  • 　　大概问题效果
  • 
• 解决方法 v-if
• 
•  大概思路   判断当前URL 是父的地址 还是子应用的地址。   子应用地址   tags-view 就隐藏。

• 子应用设置 路径地址的问题

               在大多数可以配置的页面的系统中，导航页面都是动态的，点击菜单会调整到一个具体地址中。必须有个可访问的组件地址。

• 解决方式

               空 组件

 

 

 

所有的 子应用 在父应用中配置导航链接到 这个空 内容的组件即可。

最后，我的天，博客园的编辑器太难用了。