qiankun vue3.0 保持組件狀態 keep-alive 的使用

手動控制子應用加載

qiankun默認提供可配置的引用加載方式, registerMicroApps 。
這種方式存在一些問題：vue

應用的切換取決於路由路徑，且路由的切換將觸發應用的卸載與加載, 例如：從 A 切換到 B, 流程：觸發A unmount -> 判斷 B 是否加載過，未加載過：觸發 bootstrap -> 觸發 mount ，加載過：直接觸發 mount

若是子應用存在內部路由時，內部路由跳轉也將觸發應用的重載。
能夠看到應用的切換，將觸發應用的重載，致使組件狀態的丟失. 因此爲了保持應用實例不會被反覆加載，咱們須要手動控制應用的聲明週期

路由改造

主應用路由bootstrap

// /root/router.js
// 子應用配置
export const MICRO_CONF = [
  {
    name: 'app1',
    entry: '//localhost:9001',
    container: '#ROOT-CONTAINER-app1',
    activeRule: '/home/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:9002',
    container: '#ROOT-CONTAINER-app2',
    activeRule: '/home/app2'
  },
  {
    name: 'app3',
    entry: '//localhost:9003',
    container: '#ROOT-CONTAINER-app3',
    activeRule: '/home/app3',
  }
]

// 手動控制應用加載
import {loadMicroApp} from 'qiankun';

// 緩存應用實例
const microList = new Map([])
// 當前應用配置
let current

const routes = [
  {
    path: '/',
    redirect: {
      path: '/home/*'
    }
  },
  {
    path: '/home/*',
    name: 'Home',
    component: Home,
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach( async (to, from, next) =>{

  const conf = MICRO_CONF.find(item => to.path.indexOf(item.activeRule) !== -1)

  // 應用跳轉
  if(conf){

    // 未切換子應用
    if(current &&  current.activeRule === conf.activeRule ){
      next()
      return 
    }
    
    const cacheMicro = microList.get(conf.activeRule)
    
    // 已緩存應用
    if(cacheMicro){
      next()
      return
    }
    
    // 未緩存應用
    const micro = loadMicroApp({...conf, router})
      
    microList.set(conf.activeRule, micro)
    current = conf
    next()

  }

  // 主應用內跳轉
  next()

})

子應用配置 keep-alive

由於須要緩存子應用，因此咱們須要爲每一個子應用配置 keep-alive。這裏須要注意的地方是，須要將keep-alive 配置在子應用的 APP.vue 根路由下。
這裏的子應用都配置在主應用的二，三級路由下，構造出的結構相似多級嵌套的父子路由關係。
因此這裏子應用的 APP.vue 內的渲染入口變成了主應用的嵌套子路徑，
2.0 使用方式緩存

<keep-alive>
  <router-view/>
</keep-alive>

3.0 使用方式app

<router-view v-slot="{ Component }">
   <keep-alive>
      <component :is="Component" />
   </keep-alive>
</router-view>

例如:

// micro-app1-vue3.0
// src/APP.vue
<template>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
</template>

// micro-app2-vue2.0
// src/APP.vue
<template>
  <keep-alive>
    <router-view/>
  </keep-alive>
</template>

本文同步分享在博客「直立猿」（JianShu）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。async