nuxt作为主应用接入qiankun的实践（附代码）

上半年一直在倒腾qiankun，在使用nuxtjs接入qiankun时遇到了一些坑，记录并分享出来，希望能帮助到大家。

代码地址：nuxtjs-qiankun-demo

Nuxtjs接入qiankun需要主要的事项：

qiankun只能在客户端运行，所以需要将qiankun的逻辑放到一个只在客户端执行的plugin中：

//nuxt.config.js

  plugins: [

  '@/plugins/element-ui',

  {

    src: '@/plugins/qiankun',

    ssr: false

  }

],

可以通过自定义路由的方式添加子应用的路由：

//nuxt.config.js

  router: {

    extendRoutes (routes, resolve) {

      routes.push({

        path: '/vueSubApp',

        component: resolve(__dirname, 'components/pages/VueSubApp.vue'),

        children: [

          {

            path: '*',

            component: resolve(__dirname, 'components/pages/VueSubApp.vue')

          }

        ]

      })

    }

  },

nuxtjs中的路由组件是对vue-router中的封装：(最大的坑点)

//packages/vue-app/template/components/nuxt-child.js

<% if (features.transitions) { %>

    return h('transition', {

      props: transitionProps,

      on: listeners

    }, [routerView])

    <% } else { %>

    return routerView

    <% } %>

可以看到nuxt支持配置来给路由加载过渡效果，切默认mode为out-in，但是这个动画模式会导致子应用激活时无法获取子应用加载的容器dom：

Application died in status NOT_MOUNTED: Target container with #container not existed while xxx mounting!

所以这里我们需要修改nuxt中的默认配置：

//nuxt.config.js

 transition: {

    name: 'page',

    // in-out也可以

    mode: ''

  },

  layoutTransition: {

    name: 'layout',

    // in-out也可以

    mode: ''

  },

巴特西

nuxt作为主应用接入qiankun的实践（附代码）

Nuxtjs接入qiankun需要主要的事项：

最新文章

热门文章