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

一般单页面应用，例如vue都是通过vue-router来做跳转，不会像多页应用一样另起新页面显示，但是也不排除一些业务上的需要。

10年积累的成都做网站、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有长海免费网站建设让你可以放心的选择与我们合作。

一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定：

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