关于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