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 格式字符串的应用
Mar 29 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
简单的js计算器实现
Oct 26 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
pandas取出重复数据的方法
2019/07/04 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
平面设计师的工作职责
2013/11/21 职场文书
销售员岗位职责范本
2014/02/03 职场文书
学校消防演习方案
2014/02/19 职场文书
银行服务感言
2014/03/01 职场文书
办护照工作证明
2014/10/01 职场文书
反腐倡廉观后感
2015/06/08 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android