vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面
goEditor: function (index,channel) {
//跨域的方法传递参数(参见
let routeData = this.$router.resolve({path: '/createImageText2', query: {ID: index,channel:channel}});
window.open(routeData.href, '_blank');
注:1、let routeData = this.$router.resolve({path:`/createImageText2/${ID,channel}`)这样传递不了参数需要使用上面的方法
2、_blank是表示开一个新窗口 在PreviewImageText.vue组件页面中通过created()生命函数接收CreateSendView2.vue组件传递地参数id,channel,在该组件中data中定义变量来接收
created(){
this.preImgMsgDTO.channel=this.$route.query.channel
this.preImgMsgDTO.id=this.$route.query.ID
}
query,和params的区别
1、用法
A、query要用path来引入,接收参数都是this.$route.query.name。
B、params要用name来引入,接收参数都是this.$route.params.name。
2、效果
A、query类似于ajax中get传参,即在浏览器地址栏中显示参数。
B、params则类似于post,即在浏览器地址栏中不显示参数。
3、个人建议
在路由传参上建议使用params,以隐藏参数,做好安全保密。
vue router 跳转到新的窗口方法的更多相关文章
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- vue router应用及总结
编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...
- framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)
framework7官方提供了vue+framework7的组合包,但是那个包用起来复杂度较高,而且不灵活.听说bug也不少. 所以我想用最原始的方式单独使用vue和framework7. 遇到以下问 ...
- vue中使用router打开一个新的窗口
一个单页应用打开一个新的窗口不是很好控制,比如权限的处理,因为原先的页面不会自动刷新,方法很简单: let routeData = this.$router.resolve({ name: " ...
- vue的跳转方式(打开新页面)及传参
1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="sp ...
- vue的跳转方式(打开新页面)
vue的跳转方式(打开新页面) 2018年11月22日 10:43:21 浊清... 阅读数 2043 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和 ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- js页面跳转 和 js打开新窗口 方法
js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...
- vue router的浏览器跳转行为
最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...
随机推荐
- flask 之request用法
每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互 基于HTML + Flask 写一 ...
- iar stm32 启动代码片段分析
今天查看了 iar 上面的启动文件,好奇堆栈指针到底是什么时候赋值的,所以就仔细的阅读了代码和相关手册,找到了答案. 首先,芯片启动后,会从ROM的首地址处进行执行,那么我们从 linker 里面找找 ...
- 8.代理ip使用
我日常常用的两个代理: 一.风讯代理 http://www.gzkangyun.com/ 操作界面: 二.智连代理 综合感觉吧,还是智连好用一点,ip质量相对好一点,价格也便宜,不过一个ip基本上的存 ...
- 26.纯 CSS创作按钮被从纸上掀起的立体效果
原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: <nav> <ul> & ...
- .bat脚本基本命令语法 http://www.cnblogs.com/iTlijun/p/6137027.html
这个是我找到的非常好的一篇文章了: 目录批处理的常见命令(未列举的命令还比较多,请查阅帮助信息) 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERR ...
- zookeeper(3) zookeeper的实践及原理
一.基于java API初探zookeeper的使用 (1)建立连接 public static void main(String[] args) { //NOT_CONNECTED-->CON ...
- liunx poi excel下载内容乱码本地tomcat正常
结论:在jsp中加上out.clear即可(前提保证生成的excel在服务器上是正确的,只是浏览器传输才出现乱码). dowload.jsp完整代码 <%@ page language=&quo ...
- 如何玩转小程序+公众号?手把手教你JeeWx小程序CMS与公众号关联
随着微信小程序新功能.新入口的不断更新,小程序的商业价值逐步增强,特别是小程序与公众号的深度融合,已经让小程序成为各行业新的营销渠道.Jeewx平台专注小程序的开发,逐步完善小程序生态圈,通过简单操作 ...
- java 使用jsoup处理html字符
依赖的jar <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artif ...
- Netty - 2
参考:Scalable IO in Java - http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf mainReactor负责处理客户端的连接请求,并将acc ...