Vue项目嵌套 vue.js前端

问题描述想要在A系统中打开B系统的内容进行数据操作。
产生原因现有已存在的前端项目中，有些系统数据是相关联的，从A项目修改数据后，又要打开B项目拿数据操作，致使用户操作不方便。
解决方案一、iframe嵌套
父系统 1、在父系统中需要配置相关菜单（或者说是路由）
2、在父系统中根据路由创建页面文件
html部分：
页面嵌套一个iframe标签，src就是需要调用的页面url（线上完整路径）。

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组件要与节点平级）
布局文件：

子系统 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）。