在主应用中如何缓存微应用中的路由页面，类似keep-alive

[zhaoxu666]

我们新系统即将采用icestark微前端架构，现在碰到了个问题。 我们每个路由会对应一个页签，切换页签也可以访问对应路由，但是在页签切换时，页面重新加载了并没有缓存。 我想了解到怎样能给微应用加类似keep-alive，我们前端框架采用的是Vue。

[maoxiaoke]

https://github.com/maoxiaoke/icestark-multi-tabs 参考下这个 demo，看下是否满足要求

[zhaoxu666]

@maoxiaoke 这个Demo 是 React的， 我们的基座应用是用Vue搭建的。有Vue的Demo么？ 十分感谢

[maoxiaoke]

@zhaoxu666 暂时没有 vue 的基座，但整体方案类似

[zhaoxu666]

好的， 我研究一下。感谢您的回复

[zhaoxu666]

@maoxiaoke 这个demo的实现方式，是类似Tab切换的方式吗？是没有用到路由？

[maoxiaoke]

@maoxiaoke 主要是结合 Tabs 组件 + icestark

[zhaoxu666]

我这边现在实现方式是：

// AppMain.vue
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

// route.js
import IcestarkApp from '@/components/IcestarkApp'

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'el-icon-s-home', affix: true }
    }]
  },
   {
    path: '/waiter',
    component: Layout,
    name: 'Waiter',
    meta: { title: '小二平台（Vue）', icon: 'el-icon-edit-outline' },
    children: [
      {
        path: '',
        name: 'IcestarkApp',
        meta: { title: '小二首页', icon: 'el-icon-setting' },
        component:  IcestarkApp 
      },
      {
        path: 'list',
        name: 'List',
        meta: { title: '小二列表', icon: 'el-icon-setting' }
      },
      {
        path: 'detail',
        name: 'Detail',
        meta: { title: '小二详情', icon: 'el-icon-setting' }
      }
    ]
  }
]

<template>
    <div id="icestarkApp">
      <div id="container"></div>
    </div>
</template>
<script>
import { createMicroApp, unmountMicroApp, unloadMicroApp } from '@ice/stark/lib/apps'

export default {
  name: 'IcestarkApp',
  props: {},
  mounted () {
    createMicroApp({
      name: 'waiter',
      activePath: '/waiter',
      title: '小二平台',
      sandbox: true,
      entry: 'http://localhost:8080',
      container: document.getElementById('container')
    })
  },
  destroyed () {
    console.log('icestarkApp destroyed')
    unmountMicroApp('waiter')
  }
}
</script>

在Main.vue中 cachedViews 是缓存组件的数组。我将IcesarkApp先固定给了小二平台的首页。在小二的首页中添加了一个输入框。实现了在输入框中输入，切换回Dashboard再切换回IcesarkApp组件后，可以看到之前输入的数据。 但是我们需要支持，双击页签后，刷新当前页。我采用的方式先跳转到一个redirect页面，带着当前页面的参数，在由redirect页面根据参数跳转回当前页面。 但是当我刷新时，调用unmountMicroApp方法后，我的整体Layout样式就没了！！！

请问这是什么原因 ？ 期待您的回复 @maoxiaoke

[maoxiaoke]

我这边现在实现方式是：

// AppMain.vue

<template>

  <section class="app-main">

    <transition name="fade-transform" mode="out-in">

      <keep-alive :include="cachedViews">

        <router-view :key="key" />

      </keep-alive>

    </transition>

  </section>

</template>

// route.js

import IcestarkApp from '@/components/IcestarkApp'



const routes = [

  {

    path: '/',

    component: Layout,

    redirect: '/dashboard',

    children: [{

      path: 'dashboard',

      name: 'Dashboard',

      component: () => import('@/views/dashboard/index'),

      meta: { title: 'Dashboard', icon: 'el-icon-s-home', affix: true }

    }]

  },

   {

    path: '/waiter',

    component: Layout,

    name: 'Waiter',

    meta: { title: '小二平台（Vue）', icon: 'el-icon-edit-outline' },

    children: [

      {

        path: '',

        name: 'IcestarkApp',

        meta: { title: '小二首页', icon: 'el-icon-setting' },

        component:  IcestarkApp 

      },

      {

        path: 'list',

        name: 'List',

        meta: { title: '小二列表', icon: 'el-icon-setting' }

      },

      {

        path: 'detail',

        name: 'Detail',

        meta: { title: '小二详情', icon: 'el-icon-setting' }

      }

    ]

  }

]

<template>

    <div id="icestarkApp">

      <div id="container"></div>

    </div>

</template>

<script>

import { createMicroApp, unmountMicroApp, unloadMicroApp } from '@ice/stark/lib/apps'



export default {

  name: 'IcestarkApp',

  props: {},

  mounted () {

    createMicroApp({

      name: 'waiter',

      activePath: '/waiter',

      title: '小二平台',

      sandbox: true,

      entry: 'http://localhost:8080',

      container: document.getElementById('container')

    })

  },

  destroyed () {

    console.log('icestarkApp destroyed')

    unmountMicroApp('waiter')

  }

}

</script>

在Main.vue中 cachedViews 是缓存组件的数组。我将IcesarkApp先固定给了小二平台的首页。在小二的首页中添加了一个输入框。实现了在输入框中输入，切换回Dashboard再切换回IcesarkApp组件后，可以看到之前输入的数据。

但是我们需要支持，双击页签后，刷新当前页。我采用的方式先跳转到一个redirect页面，带着当前页面的参数，在由redirect页面根据参数跳转回当前页面。

但是当我刷新时，调用unmountMicroApp方法后，我的整体Layout样式就没了！！！

请问这是什么原因 ？ 期待您的回复 @maoxiaoke

https://micro-frontends.ice.work/docs/faq#%E5%88%87%E6%8D%A2%E5%BE%AE%E5%BA%94%E7%94%A8%E4%B8%BB%E5%BA%94%E7%94%A8%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1 是否由这个导致