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在事件监听方面的兼容性小结
Apr 07 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JS实现简易留言板(节点操作)
Mar 16 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
PHP开发大型项目的一点经验
2006/10/09 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php常用hash加密函数
2014/11/22 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
使用PHP编写发红包程序
2015/07/22 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
原生js开发的日历插件
2017/02/04 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
学院领导推荐信
2013/10/30 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
2014年财政工作总结
2014/12/10 职场文书
学生会辞职信
2015/03/02 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers