关于vue.js: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