Vue中使用iframe嵌套页面

会员资料统计表（下面简称A页面）

患者管理（下面简称B页面）

一、原始需求

用户希望点击A页面的【顾客姓名】，然后弹框显示B页面的内容。之前是通过页面跳转实现的，用户反馈太麻烦了，效率低下，要求改成弹框。

二、需求分析

由于B页面是个合成的复杂页面，将其改造成组件js实现页面被点击后当前页面改变，然后进行弹框将会比较麻烦。项目做了三四年，经过了很多人的手，代码修改维护已经很难了，一般不轻易动原先的代码。既然改造方案不好实行，那么就想到了通过 iframe 的方式，直接将 B 页面嵌套在弹框里进行显示就可以了。

三、具体实现

1. 在 A 页面中写一个弹框，然后弹框里面放入iframe

<el-dialog :visible.sync="showMemberInfo" title="会员信息">
    <div style="width: 80vw; height: 80vh;">
        <iframe
            :src="iframeSrc"
            width="100%"
            height="100%"
            frameborder="0"
            scrolling="no">
        iframe>
    div>
el-dialog>

el-dialog 是element-ui的弹框组件，iframeSrc 是B页面的页面路径，下面是 A 页面中的部分 JS 代码

data () {
    showMemberInfo: false,
    iframeSrc: ''
},
methods: {
    checkMemberInfo (row) {
        // 项目采用的是 hash 路由模式
        this.iframeSrc = `/#/member/info?vipId=${row.vipId}`
        this.showMemberInfo = true
    }
}

2.B页面接收一个vipId参数，通过传入的vipId加载顾客的相关信息。但是，通过 iframe 弹框的方式，尽管每次传入的iframeSrc中的vipId更新了，但是弹出的B页面的数据并没有自动更新。所以我们需要自行处理一下，下面是B页面的部分代码

data () {
    return {
        // ...
    }
},
created () {
    this.getMemberInfo()
},
beforeRouteUpdate(to, from, next) {
    // 关于此路由钩子的说明
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`

    this.getMemberInfo() // 获取会员信息
    next();
},
methods: {
    getMemberInfo () {
        // ...
    }
}

我们的处理方式主要是通过beforeRouteUpdate路由钩子来实现js实现页面被点击后当前页面改变，当路由参数更新时，会自动触发此钩子，然后在钩子内部调用获取会员信息的方法就行了，这样每次传入的vipId参数变更时，都能拿到对应的会员数据，而不会是上一次的缓存数据 。

四、最终效果