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()方法 ...
随机推荐
- iOS 高效的分页加载(TableView、CollectionView)
一.tableview的分页加载的代码对比 没有优化之前的代码如下 [strongSelf.tableView.mj_footer endRefreshing]: [strongSelf.articl ...
- Android开发:getSupportFragmentManager()不可用
getSupportFragmentManager()这个函数不可用显然是因为activity继承错误了,因此我们需要将整个类的所继承的类改变即可 public class MainActivity ...
- ABP进阶教程1 - 条件查询
点这里进入ABP进阶教程目录 添加实体 打开领域层(即JD.CRS.Core)的Entitys目录 //用以存放实体对象添加一个枚举StatusCode.cs //状态信息 using System; ...
- 渗透测试学习 十九、 XSS跨站脚本漏洞详解 续2
二阶注入环境搭建 74cms 3.4 直接将源码放在PHPstudy的www路径下,在地址栏中输入127.0.0.1回车 然后进入网站首页,在填写简历里面存在二阶注入 先注册一个账号 创建简历 前面的 ...
- Linux文件传输协议2019-7-9
FTP(file transfer Protocol)是一种在互联网中进行文件传输的协议,基于客户端/服务器模式,默认使用20.21号端口,其中端口20(数据端口)用于数据传输,端口21(命令端口)用 ...
- CodeForces - 1255C(构造+模拟)
题意 https://vjudge.net/problem/CodeForces-1255C 一个长度为n的序列,给你n-2个三元组,比如p=[1,4,2,3,5],那么三元组为[1,4,2],[4, ...
- nm U -l库的
nm U -l库的
- itestpdf
itestpdf jar pdf
- Jmeter之BeanShell
在Jmeter中各种分类组件中都有相应的BeanShell组件,这里简单的说明一下Beanshell的使用. 一.概念 BeanShell是一种符合Java语法的脚本语言,也有自己的一些特定语法 二. ...
- lstm和gru详解
一.LSTM(长短期记忆网络) LSTM是一种特殊的RNN类型,一般的RNN结构如下图所示,是一种将以往学习的结果应用到当前学习的模型,但是这种一般的RNN存在着许多的弊端.举个例子,如果我们要预测“ ...