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单页面应用打开新窗口显示跳转页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持北冥有鱼编程技术建站教程。

您可能感兴趣的文章:

• vue构建单页面应用实战
• 解决vue单页路由跳转后scrollTop的问题
• vue页面跳转后返回原页面初始位置方法
• vue实现登录后页面跳转到之前页面
• vue-router跳转页面的方法
• Vue.js实战之利用vue-router实现跳转页面