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

一般单页面应用，例如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单页面应用打开新窗口显示跳转页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue构建单页面应用实战

    vue构建单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

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

    一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要. 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({name: 'abc'}) 以上是常规的通过路由的页面跳转方法. 我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变. const { href } = this.$router.resolve({ name: 'abc' }) window.

  • vue打开新窗口并实现传参的图文实例

    vue打开新窗口并实现传参的图文实例

    我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过面向百度编程,发现网上的根本达不到这个效果,而且还都是坑,明明实现不了,还若有其事的写出来,于是我在标题特意加上有图有真相,诚我不欺,实现不了功能,就不要出来糊弄人. 先把我做好的代码写出来,后面再介绍别人实现不了的坑,以及这方面相关要注意的. 打开新窗口并传参代码 //打开新窗口并传参,参数不能显

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a>    getGetMyPortfolioById(vals) {      getMyPortfolioById({       }).then(response = >{          const routerdata = this.$router.resolve({             

  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    目录 vue路由跳转打开新窗口和关闭窗口 编程式导航 window.open( )方法 关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法 第二种方法 第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口 需求:从当前页面跳转到其他页面时,打开一个新窗口 比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航 编程式导航 使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只

  • js使用post 方式打开新窗口

    js中一般新打开窗口很简单直接window.open(url);就可以了, 但是由于我希望传递参数到服务端,而且参数看起来很长一串,而且get方式的提交参数长度是有限制的,因此我有以下需求: 1,js中实现post提交 2,返回的页面在新窗口显示 首先我是这么做的: 复制代码 代码如下: $.ajax({                        type: "POST",                        url: '${contextPath}/analyse/de

  • js打开新窗口方法整理

    window.location="aaa.aspx" 上面的方法只能在当前页打开,如果要在新的页面打开,最简单的是用以下方法 form.target="_blank"; form.action="aaa.aspx"; form.submit(); window.top.location=url 可以在iframe中的页面在父窗口刷新打开 window.open方法可控制的样式丰富,比如我们可以控制窗口显示的大小,窗口显示的内容,以及位置等等.都是

  • mui 打开新窗口的方式总结及注意事项

    一.什么是良好的用户体验(淘宝.易迅) 1.预加载截图方式:点击.切换模版窗口.显示等待框.执行ajax并渲染.显示数据.关闭等待框. 2.head.body分开载入方式:点击.切换窗口显示等待中.执行ajax并渲染页面.将渲染好的页面append到body中. 3.lazyload等方式感觉太贴近网页,就不算在良好用户体验内了. 二.注意事项 1.窗口切换时执行并发任务(ajax请求或渲染页面)会影响体验 2.无从得知webview渲染完毕的时机 3.使用pop-in应该将动画延长到200-3

  • JS打开新窗口防止被浏览器阻止的方法

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止) 第二种.模拟表单(form)提交,原理是指定表单的a

  • javascript打开新窗口同时关闭旧窗口

    其实这个问题和浏览器的版本息息相关,作为菜鸟的我,直到现在也没有找到完美的解决办法.没办法,因为业务必须要实现,所以只好用另一种方法去做了:通过重定向URL实现打开新窗口的同时"关闭"旧窗口 test1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> test1 </TITLE>

  • JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法.分享给大家供大家参考,具体如下: 在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口. 这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件. 比如下图的效果: 在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会. 在新窗口的地址栏不可以编辑,不能被调

随机推荐