在vue中实现嵌套页面(iframe)_vue.js

来源:脚本之家  责任编辑:小易  

最近在研究vue组件的学习,给自己留个笔记,也分享给大家,希望能对大家有所帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例-组件嵌套二种方式</title> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> </head> <body> <div id="app"> <Itemlist1> <Item v-for="item in items1" :data="item"/> </Itemlist1> <Itemlist2 :itemlist="items2"></Itemlist2> </div> <script> Vue.component('Item',{ template: '<div>{{data.name}}</div>', props: { data:Object } }); // 方式一:嵌套组件时用<slot></slot>, Vue.component("Itemlist1", { template: '<div @click="ok"><slot></slot></div>', props: { itemList: Array }, methods: { ok: function() { alert(this.abc); } } }); // 方式二: Vue.component("Itemlist2", { template: '<div @click="ok"><Item v-for="item in itemlist" :data="item"/></div>', props: { itemlist: Array }, methods: { ok: function() { alert(this.abc); } } }); // 创建根实例 var vueApp = new Vue({ el: '#app', data: { items1: [{ 'name': "item1" }, { 'name': "item2" }, { 'name': "item3" }], items2: [{ 'name': "item1-1" }, { 'name': "item2-1" }, { 'name': "item3-1" }] } }) </script> </body> </html> 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家www.zgxue.com防采集请勿采集本网。

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

父窗口和顶层窗口就不一定相同了。 在框架iframe指的那个具体的页面中写: window.parent .closeiframe() 在包含框架的主页面写 function closeiframe(){//返回到该页面时隐藏

<iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute;top: -300px;left: 0px;"></iframe>

If true, log warnings instead of throwing exceptions when multiple SparkContexts are active 该值默认为false, 即不vue-router实现单页面怎么跳转到加载写好的vue文件

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

菜籽油清关流程: 收发货人备案、办理自动进口许可证、设计中文标签、审核单证资料(针对首次进口,到港前办好) 船公司换单 办理报检、提交中文标签、商检出通关单 报关,

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

展开全部 首先在app.vue里面有这么一段 然后你所点击的按钮其实是这个东西,这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候

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

通过路由减少页面访问次数达到页面无刷新切换。也就是单页面应用。 题主所说的“多页面应用”其实是没有什么意义的。如果强行为了实现而去实现也是可以的: 取消vue-ro

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

Spark有个关于是否允许一个application存在多个SparkContext实例的配置项, 如下: spark.driver.allowMultipleContexts: If true, log warnings instead of throwing exceptions when

废话不多说,直接进入正题;

vue.js实现页面加载完成执行函数 功能和jquery的 <script> $(function () { alert(&quo 则此为彼之函数”,也即函数指一个量随着另一个量的变化而变化,或者说一个量中包含

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

实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁 您可能感兴趣的文章:vue-router路由参数刷新消失的问题解决方法vue router路由嵌套不

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

</Modal> js代码: 让谁先显示,就在data中定义modalOFF的属性值。默认是 modalOFF: 1, 当modalOFF为null的时候,对话框也就消失了。 以上这篇vue2.0 实现页面导航提示

问题 1 (go back)

呵呵,我觉得你可以先去查查手册或者看看提供的demo,默认情况应该是存在就直接切换但是不刷新,如果需要刷新应该是要重写一下,或者有update方法调用,这只是提供一个解

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

vue路由篇(动态路由、路由嵌套)如何在vue里面优雅的解决跨域(路由冲突问题)vue路由前进后退动画效果的实现代码简述vue路由打开一个新的窗口的方法详解vue组件中使用路

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

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api:get(url, ).then(successCallback,errorCallback);3、在一个Vue实例内使用$http//$http是在vue的局

code:

vue说实话没怎么用过一直用的是react,react里没有能够实现兼容不同设备的插件,所以我一直用的是淘宝的 flexible.js 省心,几乎不会出现兼容难问题,而且提交小,易上手

$(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模板中的,访问另一个页面样式就会追加到head标签中,访问的越多head标签的style标签也就越多,即便style标签加入scoped可以避免样式冲突: 后来我

介绍:

popstate:每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。

forward:移动到下一个访问页面,等同于浏览器的前进键。

其他的没啥了吧,相信大家也都能看懂,其实只需copy copy copy;

问题 2 (iframe中的请求);

关于请求其实没啥要说的,但是还是有人会问,既然问了那就顺便说一下吧。

例如:有一个活动详情页面iframe,活动 列表是vue层,点击活动列表某一项跳详情,此时请求接口,地址栏带参数,像这种页面一般在iframe页面请求的接口中,最主要的参数就是活动ID,当然不排除你们公司有个奇葩后台,或者刚从某培训机构培训出来的所谓大牛,以此类推,参数继续带过来。

code:

function PcCommon(){ this.baseUrl='https://xxxxxxx';这里写你的基址路径}PcCommon.prototype={ GetQueryString: function(name) { return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null; },//获取地址栏参数 ajaxPost:function(){ $.ajax({ url:this.baseUrl+url+signParam(), type:'POST', async:true, data:JSON.stringify(data), dataType:'json', headers:{ "Authorization":getCookie('token'), "Content-Type":"application/json;charset=UTF-8" }, success:function(res){ if(typeof success == 'function'){ success(res) } } }) },//二次分装ajax goTop:function(id){ var num = $('.'+id).offset().top+125+'px'; $('html,body', window.parent.document).animate({scrollTop: num }, 500); }//分装的滚动,白送}

这是本尊写的一个简单的base.js就是原生的面向对象。

写到基址路径的时候这里还真有必要说一下这个请求。

首先vue打包的时候并不会把iframe中的html打包进去,所以当初你在main.js中设置的那些基址以及common是不能用的,所以base.js才产生了基址路径,当然你准备部署的时候一定要记得改掉你的基址路径,建议,最好写两个,一个注释,一个打开,也挺方便,一目了然;

接下来是调用,上代码;

code:

var newHd=new PcCommon(); var actStage=newHd.GetQueryString('actStage');//获取iframe地址栏参数实例 var actId=newHd.GetQueryString('actId');//获取活动ID newHd.baseUrl = 'http://192.168.0.13:7500/';//更改你的基址路径,上线的时候直接注释掉就OK $('.confirm_simne_btn').on('click',function(){ var that=this; newHd.ajaxPost( '/activity/v1/invitation/claimPrize', { activityId:actId, prizeLevel:id }, function(res){ console.log(res) //直接写你的操作就OK } ) })

就个简单的ajax请求,真没啥要说,不过刚刚在写文的过程中又想起一些知识点,继续下文。

问题 3(由问题2引发===>关于目录)

npm run build 相信这条命令是干啥的大家都清楚,会生成一个dist文件,在这里我不批判他人,只说我的做法;

例如:还是拿活动举例,活动列表下有诸多个不同的template,犹豫打包并不会把iframe文件打包进去,所以我直接把他放在dist文件下,发布的时候直接打包dist。

直接上图:

简单的介绍一下,dist不用多说了,static以及index.html也不用说了,最主要的看newAct这个夹子,这个夹子就是你们所谓的活动夹子,里面有public和view,public主要放的一些公共的css、js、以及第三方包。view里面就是各个活动的夹子,例如duyuesheng这个夹子,就和你正常写H5一样,里面 有js、css,这些你们就随意发挥吧。

就先介绍到这里?

还有在iframe中操作vue的方法,在firame中跳转到vue指定的路径....问题有很多,也不是一句两句能说清楚的,关键没个很好的例子给大家演示,就这样吧,有不懂的可以留言或者私密我....

此文写给那些需要的人看,不喜勿喷!!希望能给大家一个参考,也希望大家多多支持真格学网!

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来 2、写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题。 我的解决方法是在刷新之后点击页面中的某个条件的时候,将参数存在localstorage里面,这个时候执行reload方法来重新加载路由。这样无论路由变美变化页面都会重新加载,再次加载数据。。 这样还会有一个问题,就在在页面刷新的时候,查询条件会重置,这样存在localstorage里面的值也要清空。 解决方法就是监听浏览器的刷新事件 window.onbeforeunload = function(event) { sessionStorage.removeItem('querydataObj') }; 然后清除sessionstorage。 以上这篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章:vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法Vue 路由切换时页面内容没有重新加载的解决方法vue通过路由实现页面刷新的方法解决vue 路由变化页面数据不刷新的问题vue router路由嵌套不显示问题的解决方法vue修改对象的属性值后页面不重新渲染的实例内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue使用iframe嵌入网页的示例代码
  • vue与iframe之间的信息交互的实现
  • 解决vue单页面多个组件嵌套监听浏览器窗口变化问题
  • vue 嵌套路由使用总结(推荐)
  • vue2.0中goods选购栏滚动算法的实现代码
  • vue-cli3项目配置vue.config.js实战记录
  • vue.js实现价格计算器功能
  • 解决vue props 拿不到值的问题
  • vue2.x 对象劫持的原理实现
  • vue+webpack项目基础配置教程
  • vue中的methods、watch、computed的区别
  • vue 全局变量的几种实现方式
  • vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应
  • vue性能优化的方法
  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法
  • Vue 多层组件嵌套二种实现方式(测试实例)
  • vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
  • Vue怎么做实现路由跳转和嵌套
  • vue如何实现前端页面切换但不刷新页面内容
  • outer实现单页面怎么跳转到加载写好的vue文件
  • 使用Vue如何实现集成Iframe页面
  • outer实现单页面怎么跳转到加载写好的.vue文件
  • 如何改造vue-cli实现多页面应用
  • outer实现单页面怎么跳转到加载写好的.vue文件
  • vue.js实现页面加载完成执行函数
  • vue通过路由实现页面刷新的方法
  • vue2.0 实现页面导航提示引导的方法
  • Vue怎样实现任意一个tab页面刷新后不回退到第一个tab标签
  • Vue实现远程获取路由与页面刷新导致404错误的解决
  • weex中 vue页面编译成js怎么实现页面间的跳转
  • vue中怎么实现移动端页面不同设备兼容
  • vue.js怎样实现页面文件的配置
  • vue 路由页面之间实现用手指进行滑动的方法
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue使用iframe嵌入网页的示例代码vue与iframe之间的信息交互的实现解决vue单页面多个组件嵌套监听浏览器窗口变化问题vue 嵌套路由使用总结(推荐)vue2.0中goods选购栏滚动算法的实现代码vue-cli3项目配置vue.config.js实战记录vue.js实现价格计算器功能解决vue props 拿不到值的问题vue2.x 对象劫持的原理实现vue+webpack项目基础配置教程vue中的methods、watch、computed的区别vue 全局变量的几种实现方式vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应vue性能优化的方法vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(pr简单理解vue中props属性vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue实现文件上传功能vue项目持久化存储数据的实现代码vue+element环境搭建与安装的方法步骤vue ssr服务端渲染(小白解惑)vue.js中该如何自己维护路由跳转记录vue2.0 给tab标签页和页面切换过渡添加样vue echarts实现可视化世界地图代码实例vue.js整合vux中的上拉加载下拉刷新实例教vue概念及常见命令介绍(1)全站最详细的vuex教程animate.css在vue项目中的使用教程
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved