【iframe页面嵌套后修改iframeUrl后页面不刷新】

1.需求

在主页面中嵌套了一个iframe页面,需要点击左侧树的叶子节点后会修改iframe的url地址,同时刷新iframe页面.

2.问题

第一次点击树的叶子节点能够加载iframe页面,但是接着点击其他节点修改url地址时,iframe页面不会刷新

3.原因

修改iframe的url地址时页面没有重新加载

4.解决

点击节点修改url地址之后,监听url值的变化并重新加载iframe页面

5.代码

-----data中定义iframeUrl

data() {
    return {
      iframeUrl: '',
    }
  },

-----修改url地址

//树节点点击事件
handleNodeClick(data, node) {
      if (!data.treeName) return
      if (node.level == 4) {
          //修改uri
        let uri = `localhost:8080/#/xxx?lineName=${data.treeName}`
        //为this.iframeUrl赋值
        this.iframeUrl = uri
      }
}

------监听iframeUrl的变化并重新加载

watch: {
    iframeUrl: {
      deep: true,
      handler(val) {
        document.getElementById('iframe的id').contentWindow.location.reload(true)
      }
    }
},