Vue项目嵌套

问题描述

想要在A系统中打开B系统的内容进行数据操作。

产生原因

现有已存在的前端项目中，有些系统数据是相关联的，从A项目修改数据后，又要打开B项目拿数据操作，致使用户操作不方便。

解决方案

一、iframe嵌套

父系统

1、在父系统中需要配置相关菜单（或者说是路由）
2、在父系统中根据路由创建页面文件
html部分：
页面嵌套一个iframe标签，src就是需要调用的页面url（线上完整路径）。

<template>
    <iframe @load="sendMessage" :src="url" ref="iframe"></iframe>
</template>

js部分：
当iframe加载完后，向浏览器通过postMessage发送约定俗称的信息（比如：code为200是两个系统约定的标志，表示这是约定的信息；token也可以直接拼接在url上，主要考虑到token外泄、字符过长等场景，才把token放在通信里）。
postMessage可以实现跨域通信，第一个参数表示要通信的内容，第二个参数表示要通信的目标地址（该场景是A嵌套B，A要向B发送信息，所以应该是B地址。'*'表示任意窗口都可以接收到）。

sendMessage() {
  const iframe = this.$refs.iframe.contentWindow;
  iframe.postMessage(
    {
      code: '200',
      token: 'xxx',
    }, '*'
  );
}

3、iframe嵌套存在无法缓存的问题，但可以把全部的iframe放在一个组件里，通过v-show控制是否展示，让人视觉上感觉页面已缓存。（iframe组件要与<keep-alive>节点平级）
布局文件：

<keep-alive :include="alive" :exclude="exclude">
  <router-view></router-view>
</keep-alive>
<iframeTemporary></iframeTemporary>

iframeTemporary文件：
第一个v-show是控制是否出现iframeTemporary这个组件，因为若是出现这个组件，需要占据整个页面；第二个v-show是控制出现路由对应的iframe标签页面。（具体细节就需要慢慢调整，比如tab页显示，iframe页面切换操作等。

<template>
  <div class="iframe" v-show="">
    <iframe v-show="$route.name === item.name" v-for="item in iframeList" :key="" :src="item.src" :key="item.key"></iframe>
  </div>
</template>

子系统

1、在路由文件中监听postMessage传输过来的数据。
onmessage 事件一定要在beforeEach里面，要控制在iframe嵌套的情况下，监听到约定内容（code为200，处理完token信息），页面才能跳转；否则就会token失效。

router.beforeEach((to, form , next) => {
  if(window.top.location !== window.self.location) {
    // iframe 嵌套
    window.onmessage = (event) => {
      if(event.data && '200' === event.data.code) {
        // 通过约定俗成的内容，判断是否是已知窗口传递过来的消息
        // 处理内容，比如token信息
        // 页面跳转
        ...
      }
    }
  }
  else {
    // 页面正常跳转
    ...
  }
})

2、若是存在多个页面跳转，且带有参数信息，子项目也可以通过postMessage传递消息。（可在路由的query部分，加一个标志字段区分是否要在iframe中打开，比如isFrame）。

router.beforeEach((to, form , next) => {
  if(window.top.location !== window.self.location) {
    if(to.query && to.query.isFrame) {
      // 参数处理
    }
  }
})

二、微服务

使用乾坤框架，可以达到微服务的目的，现在项目还有一些问题，暂时不做总结，可以参考官方文档qiankun