渲染器

PC端

注册路由

将新添加的低代码配置页面添加到路由表中

[
  {
    path: "demo1",
    name: "demo1",
    meta: {
      micro: true, // 这里用于标注该页面为微应用页面
    },
    component: () => import("../views/BlankPage/index.vue"), // 这里由于页面需要渲染为微应用中的页面，所以component指向一个空div组件
  },
];

渲染器渲染

在 vue 工程中的布局组件中，会存在<router-view>用于展示原工程的页面。

1、在 template 中添加用于挂载微应用的 div

2、在 data 中创建变量用于标识是否已加载过微应用，初始值为 false

3、监听$route 路由变化，当未加载微应用时进行微应用加载

4、添加 loadMicro 方法用于加载微应用，注意：loadMicroApp 中的 props 需传递如下信息：

（1）routerData：新添加页面的所有路由信息数据，只包含 name 和 path 属性即可

（2）getPage：获取页面信息方法，该方法需返回一个 Promise 对象，能够通过.then({ pageJson, buttonList })获取到页面 json 信息和按钮权限信息

（3）request：公共接口请求方法，该方法需返回一个 promise 类型数据，可通过.then(res)获取到接口数据

<template>
  <div>
    <keep-alive>
      <router-view :key="$route.fullPath" />
    </keep-alive>
    <!-- 微应用挂载div -->
    <div id="symaPage" v-show="$route.meta.micro"></div>
  </div>
</template>

<script>
import { loadMicroApp } from "qiankun";
export default {
  data() {
    return {
      loadSyma: false // 是否加载了微应用
    };
  },
  watch: {
    $route: {
      handler(val) {
        const { meta } = val;
        if (meta.micro) {
          if (!this.loadSyma) {
            this.loadMicro();
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    // 加载微应用
    loadMicro() {
      const microApp = loadMicroApp({
        name: "vue3-micro-vite",
        entry: `${window.location.origin}/vue3microvite`,
        container: "#symaPage",
        props: {
          routerData: [
            {
              path: "/demo1",
              name: "demo1"
            },
            {
              path: "/demo2",
              name: "demo2"
            }
          ],
          getPage: this.getPage,
          request: this.request
        }
      });
      microApp.mountPromise.then(() => {
        this.loadSyma = true;
      });
    },
    getPage() {
      return new Promise(resolve => {
        // 这里调用api获取数据res，并在api调用的.then()方法中执行resolve();
       // pageJson参数为页面JSON
        // buttonList参数为按钮权限对象数组，对象中包含butCode（按钮编码）和butName（按钮名称）属性
        resolve({ pageJson, buttonList });
      });
    },
    // 接口请求方法
    request(options) {
      console.log(options);
      // options为接口请求信息对象，内有请求url、method、body等属性
      // 这里需调用工程中的公共请求方法，需返回Promise类型，即可通过.then(res)获取到res接口返回数据
      // return Promise.resolve({});
    }}
  }
};
</script>