vue單頁面應用打開新窗口顯示跳轉(zhuǎn)頁面的實例
更新時間：2018年09月21日 09:56:16 作者：scorpio_h
今天小編就為大家分享一篇vue單頁面應用打開新窗口顯示跳轉(zhuǎn)頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
一般單頁面應用，例如vue都是通過vue-router來做跳轉(zhuǎn)，不會像多頁應用一樣另起新頁面顯示，但是也不排除一些業(yè)務上的需要。
一般情況下單頁面應用的路由跳轉(zhuǎn)我們都是通過簡單的一句話搞定：
this.$router.push({name: 'abc'})
以上是常規(guī)的通過路由的頁面跳轉(zhuǎn)方法。
我們現(xiàn)在的需求是另外開啟一個新頁面來顯示跳轉(zhuǎn)到的頁面，原本的窗口保持頁面不變。
const { href } = this.$router.resolve({
name: 'abc'
})
window.open(href, '_blank', 'toolbar=yes, width=1300, height=900')
只要將vue-router和window.open結(jié)合就行了。原理很簡單，獲取你要跳轉(zhuǎn)的地址，把地址傳給window.open，讓他新建個窗口來打開路由地址，原本的頁面路由不做跳轉(zhuǎn)，還可以在window.open內(nèi)做一些控制，例如窗口大小，是否顯示工具欄之類的控制。
以上這篇vue單頁面應用打開新窗口顯示跳轉(zhuǎn)頁面的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的計算屬性傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了VUE+axios+php實現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了簡單了解Vue + ElementUI后臺管理模板,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Vue組件數(shù)據(jù)傳遞與props校驗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.sync修飾符與$emit(update:xxx)詳解
這篇文章主要介紹了Vue.sync修飾符與$emit(update:xxx),實現(xiàn)思路非常簡單，文章介紹了.sync修飾符的作用和使用.sync修飾符的寫法，實現(xiàn)代碼簡單易懂對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
vue使用axios?post發(fā)送json數(shù)據(jù)跨域請求403的解決方案
這篇文章主要介紹了vue使用axios?post發(fā)送json數(shù)據(jù)跨域請求403的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue 自定義指令功能,結(jié)合完整實例形式分析了vue.js自定義指令相關(guān)實現(xiàn)與使用操作技巧,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue3頁面加載完成后如何獲取寬度、高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue2.0 解決抽取公用js的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07