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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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
php下实现农历日历的代码
2007/03/07 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP整合PayPal支付
2015/06/11 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
jQuery 动画基础教程
2008/12/25 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
联想C++笔试题
2012/06/13 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
工地安全标语
2014/06/07 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js