在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 跳转到新的窗口方法的更多相关文章

  1. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  2. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

  3. framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)

    framework7官方提供了vue+framework7的组合包,但是那个包用起来复杂度较高,而且不灵活.听说bug也不少. 所以我想用最原始的方式单独使用vue和framework7. 遇到以下问 ...

  4. vue中使用router打开一个新的窗口

    一个单页应用打开一个新的窗口不是很好控制,比如权限的处理,因为原先的页面不会自动刷新,方法很简单: let routeData = this.$router.resolve({ name: " ...

  5. vue的跳转方式(打开新页面)及传参

    1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="sp ...

  6. vue的跳转方式(打开新页面)

    vue的跳转方式(打开新页面) 2018年11月22日 10:43:21 浊清... 阅读数 2043   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和 ...

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. js页面跳转 和 js打开新窗口 方法

    js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...

  9. vue router的浏览器跳转行为

    最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...

随机推荐

  1. Hive 2.1.1安装配置

    ##前期工作 安装JDK 安装Hadoop 安装MySQL ##安装Hive ###下载Hive安装包 可以从 Apache 其中一个镜像站点中下载最新稳定版的 Hive, apache-hive-2 ...

  2. [Unity基础]RenderTexture

    参考链接: https://www.cnblogs.com/Jimm/p/5951362.html 一.相关API 1.Texture2D.ReadPixels 从RenderTexture.acti ...

  3. CPU Usage Sampling Profiles (cpu=samples)

    HPROF工具通过对采样线程搜集CPU使用信息.以下是从运行的javac中样例输出的一部分. $ javac -J-agentlib:hprof=cpu=samples Hello.java CPU ...

  4. Flex4学习笔记 checkBox RadioButton DropDownList colorPicker

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  5. springboot retry

    try/catch,while 循环或者定时任务  这样看起来 好  low sping boot  retry , 这样代码更简洁 eg: @Retryable(value= {RemoteAcce ...

  6. Linux 创建用户并赋予 Sudo 权限

    01,创建账号 => useradd admin 02,赋予密码 => passwd admin 03,修改 sudo 权限文件,使得该用户可以使用 sudo 命令 vim /etc/su ...

  7. configparser 模块

    import configparser #按字典方式操作 config = configparser.ConfigParser() #创建config 对象 #config对象test 等于 {'na ...

  8. delphi ios info.plist

    delphi ios info.plist delphi修改info.plist.TemplateiOS.xml文件,然后自动生成project1.info.plist http://docwiki. ...

  9. 安装Ubuntu

    win7和vista如何登录administrator账户 首先关闭UAC(如何关闭Windows7 UAC?二种方法进入“UAC设置界面”: 方法1:开始→控制面板→查看方式:大图标→操作中心→更改 ...

  10. JEECG-P3首个开源插件诞生!CMS网站插件 Jeecg-p3-biz-cms1.0版本发布!

    Jeecg-P3-Biz-Cms   ( JEECG 首个微服务插件,支持小程序的CMS系统) 是基于JEECG-P3 微服务框架开发的CMS建站系统,可轻量级集成进jeecg系统,定制各类网站模板, ...