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 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
js实现右键自定义菜单
Dec 03 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
vue 文件目录结构详解
Nov 24 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
Javascript模板技术
2007/04/27 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
总经理职责范文
2013/11/08 职场文书
优秀村官事迹材料
2014/01/10 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
暑假家长评语大全
2014/04/17 职场文书
《画家乡》教学反思
2014/04/22 职场文书
高中学生期末评语
2014/04/25 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB