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()方法 ...
随机推荐
- Git:SSH、SSH与HTTP区别、git常用命令
SSH1.首先需要检查你电脑是否已经有 SSH key cd ~/.sshls12.ssh表示ssh文件是个隐藏文件查看是否存在 id_rsa.pub 或 id_dsa.pub 文件,如果文件已经存在 ...
- [PHP] 近期接手現有的企邮前端框架业务所遇困难
1.邮箱前端有三大产品线,包括免费邮箱,VIP邮箱,企业邮箱,使用的一套代码,在代码中进行的逻辑判断处理,根据不同的配置进行不同的业务操作.有很多逻辑是各产品线是不同的,需要仔细开发和判断才能不会影响 ...
- CPU与GPU基础知识与品牌
1 CPU信息 ubuntu系统: lscpu 序号 属性 描述 1 架构 x86_64 2 CPU 运行模式 32-bit, 64-bit 3 字节序 Little Endian 4 CPU内核数量 ...
- Node.js连接数据库取值,简单接口的实现
第一步:先安装Node.js,这里不做介绍 第二步:新建一个文件夹,打开cmd,进入该文件夹 执行npm init命令生成page.json文件 第三步:安装如下模块,打开cmd,进入第二步的文件夹, ...
- js 构造函数中的 return
本文链接:https://blog.csdn.net/qq_36209248/article/details/89190978 默认情况下,没有return的函数的返回值为undefined(即没有定 ...
- SpringBoot关于静态js资源的报错问题
2019-12-02 09:45:01.636 WARN 9572 --- [nio-8080-exec-2] o.s.web.servlet.PageNotFound : No mapping fo ...
- 用 FFLIB 实现 Apex 企业设计模式
Apex 企业设计模式将应用分为服务层.模型层.选择逻辑层.工作单元几个部分.FFLIB 是一个开源的 Apex 框架,可以帮助开发者快速建立相关的功能. FFLIB 的安装 FFLIB 可以直接部署 ...
- 05-01 seaborn
1.Seaborn 在上节中我们学习了matplotlib,这节课我们来看看另一个可视化的模块seaborn,它是基于matplotlib的更高级的开源库,主要用作于数据可视化,解决了matplotl ...
- 解惑:在Ubuntu18.04.2的idea上运行Scala支持的spark程序遇到的问题
解惑:在Ubuntu18.04.2的idea上运行Scala支持的spark程序遇到的问题 一.前言 最近在做一点小的实验,用到了Scala,spark这些东西,于是在Linux平台上来完成,结果一个 ...
- 【ECharts】1.学习ECharts从现在开始:第一个Echart图形
首先,你需要下载ECharts所需的文件,我使用的是echarts-2.0.2版本,点击这里下载:echarts-2.0.2 下载解压后,下面有一系列文件夹,其中build中有我们需要引入的JS文件, ...