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()方法 ...
随机推荐
- java annotation使用介绍
还望支持个人博客站:http://www.enjoytoday.cn 介绍 Annotation的中文名字叫注解,开始与JDK 1.5,为了增强xml元数据和代码的耦合性的产物.注解本身并没有业务逻辑 ...
- [收藏]Dubbo官方资料
首页 || 下载 || 用户指南 || 开发者指南 || 管理员指南 || 培训文档 || 常见问题解答 || 发布记录 || 发展路线 || 社区 English ...
- MD文件图片base64自动编码
看工具链接请直接将文章拉到最后.. 概述 不知道你在使用markdown写文章的时候有没有遇到过这样的烦恼, 文件写完了, 想将写完的文章粘贴到博客的时候, 你满心欢喜的复制粘贴, 但是发现图片根本复 ...
- 初学JavaScript正则表达式(三)
正则表达式由两种基本的字符类型组成 原义文本字符 //a abc 1 元字符 元字符是有特使含义的非字母字符 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式一次或多次 ? 匹配前面的子表达式 ...
- 平方,立方,n次方,上标/下标
选种你需要的上标,如2,右键设置单元格格式:选择上标,确定即可: 最终效果:
- Maven中使用tomcat:run出现错误org.eclipse.jdt.internal.compiler.classfmt.ClassFormatException
配置是正常的.查阅资料以后说是jdk版本什么的问题.多方修改没有任何改观.换一个思路去查询tomcat:run怎么运行. 是因为他还是沿用了上一次的tomcat插件(默认是6)所以运行的时候使用 to ...
- [C5W1] Sequence Models - Recurrent Neural Networks
第一周 循环序列模型(Recurrent Neural Networks) 为什么选择序列模型?(Why Sequence Models?) 在本课程中你将学会序列模型,它是深度学习中最令人激动的内容 ...
- 关于字符串在ie浏览器拼接问题
常用的字符串在ie浏览器拼接不识别的问题,建议不要使用字符串拼接,可直接用jquery添加方便快捷一些
- 学习:反调试之IsDebuggerPresent
前言:一个反调试IsDebuggerPresent的CreackMe IsDebuggerPresent函数的了解: IsDebuggerPresent 作用 确定调用进程是否由用户模式的调试器调试. ...
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...