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

这篇文章主要为大家详细介绍了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单页面应用打开新窗口显示跳转页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/6182-0.html

注：关于vue单页面应用打开新窗口显示跳转页面的实例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js