vue中嵌套的iframe中控制路由的跳转及传参
在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中控制路由的跳转及传参的更多相关文章
- react路由的跳转和传参
1.路由的跳转 一.DOM跳转 在需要跳转的页面导入import {Link} from 'react-router-dom',在需要跳转的地方使用link标签的to属性进行跳转,路由配置文件中导出的 ...
- vue2.0路由(跳转和传参)经典介绍
声明式 <router-link :to="...">编程式router.push(...) router.push('home') / ...
- vue路由对不同界面进行传参及跳转的总结
最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- MVC中学到的小知识(MVC中的跳转,传参)
1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...
- vue 路由跳转,传参
一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- 路由的query参数(传参)
路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...
- vue页面跳转以及传参和取参
vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值 this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...
随机推荐
- Excel 扩展编程相关
============================产品分析============================Excel Automation Tools (Best of List)htt ...
- 记录C#-WPF布局面板
StackPanel:适合水平或者垂直方向的布局 DockPanel:区域布局 WrapPanel:自动换行的StackPanel布局 Grid:网格布局
- linux SSH设置
环境:centos7 一. ssh连接超时设置 (1)客户端设置(推荐) 客户端是windows系统 连接工具:SecureCRT 1.SecureCRT客户端->Options(选项)-> ...
- 执行 npm cache clean报错
C:\Users\you name>npm cache cleannpm ERR! As of npm@5, the npm cache self-heals from corruption i ...
- 2018年蓝桥杯A组C/C++决赛题解
2018年第九届蓝桥杯A组C/C++决赛题解 点击查看视频题解 点击查看2018年蓝桥杯A组C/C++决赛题目(不含答案) 1:三角形面积 画个图,求三角形面积,可以用外接长方形 - 其他多余区域面积 ...
- SpringCloud学习笔记(十、SpringCloud Sleuth)
目录: 什么是SpringCloud Sleuth 为什么使用SpringCloud Sleuth 如何使用SpringCloud Sleuth 什么是SpringCloud Sleuth: Spri ...
- Node.js Koa2开发微信小程序服务端
1.promise.async.await const Koa = require('koa') const app = new Koa() // 应用程序对象 有很多中间件 // 发送HTTP KO ...
- 深入了解Python
一.Python的风格 Python在设计上坚持了清晰划一的风格,这使得Python成为一门易读.易维护,并且被大量用户所欢迎的.用途广泛的语言. 设计者开发时总的指导思想是,对于一个特定的问题,只要 ...
- 鲜贝7.3--navicat破解
Navicat for MySQL 安装软件和破解补丁: 链接:https://pan.baidu.com/s/1yy5JkrXk5NV129wzkzntqw 提取码:htc2 1.安装Navicat ...
- eclipse 错误日志地址
我们用eclipse插件的时候,有时插件会报错误,那么这些错误日志在哪儿放着呢? 这些错误日志的存放位置是:“你的workspace名称\.metadata\.log”,如果我们的eclipse报错了 ...