在vue中实现嵌套页面的方法-创新互联

这篇文章主要讲解了在vue中实现嵌套页面的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

在长安等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站制作、成都做网站 网站设计制作按需网站制作,公司网站建设,企业网站建设,高端网站设计,成都全网营销推广,成都外贸网站建设,长安网站建设费用合理。

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…

补充知识：关于VUE嵌套iframe的一系列问题

此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，单写的请忽略；

最近有很多小伙伴问超哥关于vue中嵌套iframe一些问题。

犹豫本尊最近转型了react，关于vue的问题以后会在csdn发表博客。

废话不多说，直接进入正题；

本尊并不建议vue嵌套iframe，当然会有那些个比较恶心的需求，例如在读的小伙伴。

申明：本尊在iframe页面写入的是JQ，因为和VUE没有特别大的牵连，所以直接操作dom了，如果有同学依然想在iframe页面中也是可以的，只需把本尊的代码copy copy copy，然后在改吧改吧就OK了。

问题 1 (go back)

例如：在iframe页面中有诸多跳转，当完成玩iframe页面中一些操作时，此时点击浏览器的回退功能，那么恭喜你中奖了，你回退的是iframe页面，并无法回退和iframe无关联的vue页面，一直点击浏览器的回退，可能会一直重复iframe连接的几个页面，或直接404，或空白。

解决办法：使用H5的history对象。

code：

  $(document).ready(function(e) { 
    var counter = 0;
    if (window.history && window.history.pushState) {
       $(window).on('popstate', function () {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.parent.location.hash='/newActivity';//这里写你自己要回退的路径
        });
     }
 
     window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
     window.history.forward(1);
  });

本文名称：在vue中实现嵌套页面的方法-创新互联
URL分享：http://cxhlcq.com/article/jodpe.html