一般單頁面應用，例如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單頁面應用打開新窗口顯示跳轉頁面的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。