vue-router,打开新页面路由跳转

方法

传参

let { href } = this.$router.resolve({path: '/path',query:{id: id ,year: year}
})
window.open(href, '_blank');

获取参数

mounted(){this.data = this.$route.query.idconsole.log(this.data)
},

router.resolve

router.resolve方法返回路由地址的标准化版本。

resolve接收两个参数: rawLocation、currentLocation(可选)。

  • 其中rawLocation是待转换的路由,rawLocation可以是个对象也可以是个字符串。
  • currentLocation不传默认是currentRoute。

参考:

https://blog.csdn.net/qq_33635385/article/details/125175571?spm=1001.2014.3001.5502

window.open()的三个参数

window.open("要跳转的网址", "跳转形式或者名字", "给出窗口添加新的的属性(字符串形式)");

例子:

window.open("###", "_blank","height=600, width=600, top=50, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");

第一个参数为地址: url

第二个参数为 打开方式或者窗口命名

  1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.
    window.open(“http://www.baidu.com/”, “_search”);
    window.open(“http://www.baidu.com/”, “_self”);
  2. 在一个新的窗口打开百度
    window.open(“http://www.baidu.com/”, “_blank”);
  3. 打开一个新的窗口,并命名为"hello"
    window.open(“”, “hello”);

另外, open函数的第二个参数还有几种选择:

_top : 如果页面上有framesets,则url会取代framesets的最顶层, 即, 如果没有framesets, 则效果等同于_self.
_parent: url所指向的页面加载到当前frame的父亲, 如果没有则效果等同于_self.
_media : url所指向的页面加载到Media Bar所包含的HTML代码区域中.如果没有Media Bar则加到本身.

第三个参数(可选): 添加其它的东西在新的窗口上

channelmode : yes|no|1|0 (窗口显示为剧场模式[全屏幕显示当前网页, 包括工具栏等],或频道模式[一般显示]).
directories : yes|no|1|0 (是否添加目录按钮, 比如在IE下可能会有一个"链接"这样的按钮在最上面出现)
fullscreen : yes|no|1|0 (使浏览器处理全屏幕模式, 并隐藏标题栏和菜单等)
menubar : yes|no|1|0 (是否显示浏览器默认的菜单栏)
resizeable : yes|no|1|0 (窗口是否可调整大小)
scrollbars : yes|no|1|0 (是否允许水平或垂直滑动条)
titlebar : yes|no|1|0 (是否添加一个标题栏)
toolbar : yes|no|1|0 (是否添加浏览器默认的工具栏)
status : yes|no|1|0 (是否显示状态栏)
location : yes|no|1|0 (是否显示搜索栏)
copyhistory : yes|no|1|0 (似乎已经废弃, 如果只要工具栏显示, 历史按钮就会显示出来)
height : 窗口的高度, 最小值为100像素
width : 窗口的宽度, 最小值为100像素
left : 窗口的最左边相对于屏幕的距离

【vue-router,使用router.resolve打开新页面路由跳转】相关推荐

  1. vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法

    vue-router跳转时打开新页面的两种方法 最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.标签实现新窗口打开 ...

  2. vue是用a标签打开新页面_vue 在新窗口打开页面并设置不同的背景

    开发一个新系统,前端用的vue,vue是单体应用,所有页面都在一个窗口里实现,但项目要求在点button链接后要新打开一个浏览器页面,解决方法如下: 1. 给此button设置新事件 @click=& ...

  3. vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面

    vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决 一.使用标签 需要注意的是,router-link并不支持 targe ...

  4. vue中页面跳转传值_vue跳转方式(打开新页面)及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...

  5. vue 路由跳转并打开新页面

    let id ='123'; const {href} = this.$router.resolve( { path: '/home/test',query: {id: id}} ) window.o ...

  6. vue项目怎么样去实现新窗口跳转_vue跳转方式(打开新页面)及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...

  7. vue中按ctrl原页面锁定打开新页面

    可以通过vuex 或者 写个公共文件实现 vuex 实现思路 1.监听键盘按下事件 2.如果按下的按钮为ctrl, 就修改状态为true, 键盘抬起或者按键不对 状态都为false 3.需要监听所有的 ...

  8. VUE打开新页面方法

    VUE打开新页面方法 我们知道,我们可以通过<a href='***' target='_blank'>*****</a>或window.open(strUrl, strWin ...

  9. vue 跳转打开新页面

    vue 跳转打开新页面 let { href } = this.$router.resolve({path: "/myEchars",query: { phone: "1 ...

最新文章

  1. 阿里技术文档:Redis+Spring全家桶+Dubbo精选+高性能+高并发
  2. 计算机科目三教学设计,信息技术-教学设计模板(科目三).pdf
  3. STM32的SPI问题。
  4. PMCAFF | 用户体验中4个你不曾知晓的秘密
  5. 【重复制造精讲】2、主数据介绍
  6. 向VMware中的Linux虚拟机共享Windows宿主机的文件/文件夹
  7. 2018中国年度AI评选揭晓!10大领航企业,50家明星公司,10佳投资机构
  8. 蓝桥杯 ADV-207 算法提高 最长字符序列
  9. Python实用技法第26篇:定义实现最短匹配的正则表达式
  10. linux下配置tomcat(详细)
  11. python可视化编程软件下载_mPython-mPython(图形化编程软件)下载 v0.5.0官方版-下载啦...
  12. python-lambda(匿名函数)原理与应用
  13. 使用 f2py 包装 Fortran MPI 程序
  14. 如何甄别应聘者简历的包装程度?
  15. OpenWrt 防火墙基础过滤--域名过滤
  16. 【linux内核分析与应用-陈莉君】时钟中断机制
  17. java 验证手机号
  18. 无法打开计算机开始菜单,开始菜单,教您开始菜单无法打开
  19. 获得用户输入一个整数N,计算并输出N的32次方:
  20. htmla标签下划线去除_html超链接去掉下划线 html去除取消超链接下划线

热门文章

  1. 操作系统expected ‘void * (*)(void *)’ but argument is of type ‘void * (*)(void)’
  2. Shane版详细设计书 文档模板
  3. java计算机毕业设计基于ssm的品牌首饰售卖平台
  4. 6-2 求子串*分数 20
  5. day05form验证、验证码、cache、cors与celery(任务队列)、CBV
  6. 华为云空间官网登录方法
  7. 2020年美容师(技师)考试报名及美容师(技师)模拟考试
  8. 解读微博Q1财报:寒冬里稳步向前
  9. php信用卡申请系统,申请信用卡“秒批“,从此让你轻而易举
  10. 天天象棋 残局闯关 第5关