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()方法 ...
随机推荐
- MySQL基于报错注入1
0x1 判断注入点: http://www.xxxx.ro/s.php?id=1' 那么尝试闭合下单引号 http://www.xxxx.ro/s.php?id=1' --+ 0x2 枚举下表的列 h ...
- Discuz! X3 数据表、数据字段说明
pre_common_admincp_cmenu 后台菜单收藏表 字段名 数据类型 默认值 允许非空 自动递增 备注 id smallint(6) unsigned NO 是 title v ...
- 记录C#-WPF打开/关闭>>事件执行顺序
打开执行顺序 关闭执行顺序
- Lustre 文件系统安装
制作一个本地镜像 reposync configfile: [root@localhost html]# cat lustre-repo.conf [lustre-server] name=lustr ...
- Centos7下安装配置keepalived
这里用的是两台设备做高可用 master服务器ip地址:192.168.12.78 slave服务器ip地址:192.168.12.79 虚拟ip(VIP,一个尚未占用的内网ip即可)地址:192.1 ...
- HTTP GET POST PUT DELETE 四种请求
1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...
- 联邦学习 Federated Learning 相关资料整理
本文链接:https://blog.csdn.net/Sinsa110/article/details/90697728代码微众银行+杨强教授团队的联邦学习FATE框架代码:https://githu ...
- 1.Java基础_Java核心机制简介
Java的两种核心机制 Java虚拟机机制 Java垃圾回收机制 解释名词 J2SDK&JRE: J2SDK=JDK=Software Development Kit(软件开发包) JRE=J ...
- C++ 模板特化、偏特化测试程序
#include <iostream> // 偏特化的模板不会自己添加构造函数 ctor 和 析构函数 dtor #if 1 // P1 template <typename T1, ...
- luoguP4103 [HEOI2014]大工程
题意 建出虚树DP. 设\(f[i]\)表示i的子树的第一问答案,\(minn[i]\)表示\(i\)的子树中到\(i\)最近的关键点,\(maxx[i]\)表示\(i\)的子树中到i距离最远的关键点 ...