在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数

//iframe向vue传递跳转路由的参数
$('#serverIPanalysis').click(function(){
window.parent.postMessage({ data:"haveparams",params:'aaaaaa' },'*');
})

在vue项目的main.js中,在页面加载的时候会触发一次message事件,所以要通过标识符判断来进行参数的接受,不然直接触发就会报错,在事件对象中有事件的信息,其中就包括iframe中的页面传递过来的参数,通过对象结构取出参数,在进行跳转的设置

//iframe中控制路由的变化
function receiveMessageFromIframePage (event) {
// console.log(event.data,event)
if (event.data.data.includes('haveparams')) {
var id = event.data.params
router.push({name: 'customerlist1',params:{id}})
} else if (event.data.data.includes('noparams')) {
router.push({name: 'customerlist1'})
}
} window.addEventListener("message", receiveMessageFromIframePage, false);

vue中嵌套的iframe中控制路由的跳转及传参的更多相关文章

  1. react路由的跳转和传参

    1.路由的跳转 一.DOM跳转 在需要跳转的页面导入import {Link} from 'react-router-dom',在需要跳转的地方使用link标签的to属性进行跳转,路由配置文件中导出的 ...

  2. vue2.0路由(跳转和传参)经典介绍

    声明式 <router-link :to="...">编程式router.push(...) router.push('home')                 / ...

  3. vue路由对不同界面进行传参及跳转的总结

    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...

  4. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

  5. MVC中学到的小知识(MVC中的跳转,传参)

    1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...

  6. vue 路由跳转,传参

    一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...

  7. vue 和 react 路由跳转和传参

                      react  1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...

  8. 路由的query参数(传参)

    路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...

  9. vue页面跳转以及传参和取参

    vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...

随机推荐

  1. vue 地图可视化 maptalks 篇

    Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库 ...

  2. Python图像处理库Pillow常用使用方法

    PIL(Python Imaging Library)是Python一个强大方便的图像处理库,只支持到Python2.7.Pillow是PIL的一个派生分支,在Python3中用Pillow代替PIL ...

  3. BayaiM__SQLLDR 用法:

    BayaiM__SQLLDR 用法: ===================================================================== C:\Users\Ad ...

  4. web前端学习路线(干货)

  5. node.js中pm2启动应用出错

    在将公司的应用容器化时,遇到的问题. 之前,同事使用node.js 6版本运行,pm2启动js文件,一切正常. 但我一样将node.js 6版本安装,然后npm install pm2完成. 运行pm ...

  6. 使用flask搭建微信公众号:完成token的验证

    上一篇文章讨论了官方给的例子验证token失败的解决方法:微信公众号token验证失败 想了一下,还是决定不适用web.py这个框架.因为搜了一下他的中文文档不多,学起来可能会有点麻烦.而且看着他没有 ...

  7. **目录找出最后一次修改的文件(html结果),发送报告到指定qq邮箱

    import unittest,HTMLTestRunnerimport osdef runa(): path=os.getcwd() print(path) a=unittest.defaultTe ...

  8. Linux shell 判断字符串为空等常用命令

    1.判断字符串为空 if [ -z "$str" ]; then echo "empty string" fi 2.判断文件是否存在 if [ -f /home ...

  9. pytorch 创建tensor的几种方法

    tensor默认是不求梯度的,对应的requires_grad是False. 1.指定数值初始化 import torch #创建一个tensor,其中shape为[2] tensor=torch.T ...

  10. 【矩阵快速幂】之奥运 hdu 2254

    1.城市的编号不是从0到n-1,而是随便的一个数字,需要离散化否则不能存相关信息 2.城市数不超过30,也就是说我的方法开矩阵不超过60,但是我残念的一开始以为最多可能有20000个不同城市    血 ...