乐趣区

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

退出移动版