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 就隱藏。

• 子應用設置 路徑地址的問題

               在大多數可以配置的頁面的系統中，導航頁面都是動態的，點擊菜單會調整到一個具體地址中。必須有個可訪問的組件地址。

• 解決方式

               空 組件

 

 

 

所有的 子應用 在父應用中配置導航鏈接到 這個空 內容的組件即可。

最后，我的天，博客園的編輯器太難用了。