vue单页面应用打开新窗口显示跳转页面的实例


Posted in Javascript onSeptember 21, 2018

一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要。

一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定:

this.$router.push({name: 'abc'})

以上是常规的通过路由的页面跳转方法。

我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变。

const { href } = this.$router.resolve({
 name: 'abc'
  })
 window.open(href, '_blank', 'toolbar=yes, width=1300, height=900')

只要将vue-router和window.open结合就行了。原理很简单,获取你要跳转的地址,把地址传给window.open,让他新建个窗口来打开路由地址,原本的页面路由不做跳转,还可以在window.open内做一些控制,例如窗口大小,是否显示工具栏之类的控制。

以上这篇vue单页面应用打开新窗口显示跳转页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 定义
Jun 10 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
JS实现4位随机验证码
Oct 19 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 #Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 #Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 #Javascript
详解vue 数组和对象渲染问题
Sep 21 #Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 #Javascript
Puppeteer环境搭建的详细步骤
Sep 21 #Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
中东人咖啡哲学
2021/03/03 咖啡文化
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
js string 转 int 注意的问题小结
2013/08/15 Javascript
JavaScript运算符小结
2015/06/03 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python使用爬虫猜密码
2016/02/19 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python使用Matlab命令过程解析
2020/06/04 Python
校园门卫岗位职责
2013/12/09 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
2014年消防工作总结
2014/11/21 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
什么是Python装饰器?如何定义和使用?
2022/04/11 Python