vue單頁(yè)面應(yīng)用打開(kāi)新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例
一般單頁(yè)面應(yīng)用，例如vue都是通過(guò)vue-router來(lái)做跳轉(zhuǎn)，不會(huì)像多頁(yè)應(yīng)用一樣另起新頁(yè)面顯示，但是也不排除一些業(yè)務(wù)上的需要。
一般情況下單頁(yè)面應(yīng)用的路由跳轉(zhuǎn)我們都是通過(guò)簡(jiǎn)單的一句話搞定：
this.$router.push({name: 'abc'})
以上是常規(guī)的通過(guò)路由的頁(yè)面跳轉(zhuǎn)方法。
我們現(xiàn)在的需求是另外開(kāi)啟一個(gè)新頁(yè)面來(lái)顯示跳轉(zhuǎn)到的頁(yè)面，原本的窗口保持頁(yè)面不變。
const { href } = this.$router.resolve({
name: 'abc'
})
window.open(href, '_blank', 'toolbar=yes, width=1300, height=900')
只要將vue-router和window.open結(jié)合就行了。原理很簡(jiǎn)單，獲取你要跳轉(zhuǎn)的地址，把地址傳給window.open，讓他新建個(gè)窗口來(lái)打開(kāi)路由地址，原本的頁(yè)面路由不做跳轉(zhuǎn)，還可以在window.open內(nèi)做一些控制，例如窗口大小，是否顯示工具欄之類的控制。
以上這篇vue單頁(yè)面應(yīng)用打開(kāi)新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3 setup語(yǔ)法糖下的定時(shí)器的使用與銷毀
如果在組件中需要使用定時(shí)器,注意在銷毀組件的時(shí)候,要對(duì)定時(shí)器進(jìn)行銷毀,否則時(shí)間長(zhǎng)了會(huì)導(dǎo)致頁(yè)面卡頓,這篇文章給大家介紹vue3 setup語(yǔ)法糖下的定時(shí)器的使用與銷毀的知識(shí),感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了vue使用反向代理解決跨域問(wèn)題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue組件vue-treeselect箭頭和叉圖標(biāo)變大問(wèn)題及解決
這篇文章主要介紹了vue組件vue-treeselect箭頭和叉圖標(biāo)變大問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-07-07
vue quill editor 使用富文本添加上傳音頻功能
vue-quill-editor 是vue項(xiàng)目中常用的富文本插件，其功能能滿足大部分的項(xiàng)目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下2020-01-01
今天小編就為大家分享一篇vue 利用路由守衛(wèi)判斷是否登錄的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個(gè)web版，因?yàn)槭堑谝淮问褂胿ue，而且一開(kāi)始使用的時(shí)候2.0出來(lái)一個(gè)月不到，很多坑都是自己去踩的，現(xiàn)在項(xiàng)目要上線了，所以記錄一些過(guò)程2017-01-01
vue清除動(dòng)態(tài)路由的問(wèn)題記錄
項(xiàng)目中往往都是添加動(dòng)態(tài)路由，如何刪除已經(jīng)添加進(jìn)來(lái)的路由往往被忽視，為此這里做一下記錄，感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了vue引入cesium問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
淺談VUE uni-app 開(kāi)發(fā)環(huán)境
這篇文章主要介紹了uni-app的開(kāi)發(fā)環(huán)境，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例
本篇文章主要介紹了vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08