Vue在原窗口與新窗口打開(kāi)外部鏈接的實(shí)現(xiàn)代碼
Vue如何在原窗口與新窗口打開(kāi)外部鏈接
Vue項(xiàng)目中如果是頁(yè)面中的內(nèi)部跳轉(zhuǎn)，可以用this.$router.repalce()實(shí)現(xiàn)，如果我們用同樣的方法跳轉(zhuǎn)外部鏈接，我們的外部鏈接前面追加了? ?http://localhost:8080/#/??導(dǎo)致跳轉(zhuǎn)出現(xiàn)問(wèn)題，那么我們?nèi)绾翁D(zhuǎn)到外部鏈接呢？跳轉(zhuǎn)鏈接分為原窗口新窗口打開(kāi)外部鏈接，具體講解如下：
HTML部分：
<div class="fotterRightTextOne" @click="jump">Vue跳轉(zhuǎn)外鏈接</div>
以下是Js部分
1、首先講解原窗口打開(kāi)外部鏈接，如果我們想要達(dá)到跳轉(zhuǎn)后可以返回原頁(yè)面可以使用此方法，接下來(lái)分別使用兩種方法實(shí)現(xiàn)：
(1) 使用location.href =""實(shí)現(xiàn)原窗口跳轉(zhuǎn)
jump() {
? ?location. rel="external nofollow"
}（2）使用window.open(url ,‘_self’), _self屬性表示在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁(yè)
jump() {
? ? window.open('https://www.baidu.com/', '_self')
}2、如果想要實(shí)現(xiàn)在新窗口打開(kāi)外部鏈接，我們可以使用 window.open(url ,‘_blank’)，_blank屬性則表示在新窗口顯示目標(biāo)網(wǎng)頁(yè)
jump() {
? ?window.open('https://www.baidu.com/', '_blank')
}總結(jié)
window.open本質(zhì)上可以看做<a>標(biāo)簽的js版本，或者說(shuō)是編碼式地打開(kāi)窗口，但它比<a>標(biāo)簽更加靈活，可以通過(guò)js實(shí)現(xiàn)與打開(kāi)的頁(yè)面之間的通信。
補(bǔ)充：vue跳轉(zhuǎn)外部鏈接
vue跳轉(zhuǎn)外部鏈接
vue 跳轉(zhuǎn)外部鏈接問(wèn)題,當(dāng)跳轉(zhuǎn)的時(shí)候會(huì)添加在當(dāng)前地址后面。
var url = 'www.baidu.com'
//跳轉(zhuǎn)1
window.location.href = url
//跳轉(zhuǎn)2
window.history.pushState(url);
window.history.replaceState(url);
//跳轉(zhuǎn)3
window.open(url,"_blank");
//跳轉(zhuǎn)4
var a = document.createElement("a");
a.setAttribute("href", "www.baidu.com");
a.setAttribute("target", "_blank");
a.click();到此這篇關(guān)于Vue如何在原窗口與新窗口打開(kāi)外部鏈接的文章就介紹到這了,更多相關(guān)Vue打開(kāi)外部鏈接內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問(wèn)題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能
對(duì)于vue下的雙向綁定功能，個(gè)人理解為在處理邏輯的過(guò)程中緩存了大量的node對(duì)象，node對(duì)象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對(duì)象，那么在用的過(guò)程中哪里需要改變就把node拿出來(lái)，進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定2021-06-06
這篇文章主要介紹了詳解vue的diff算法原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue2?響應(yīng)式系統(tǒng)之深度響應(yīng)
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之深度響應(yīng)，文章基于Vue2?響應(yīng)式系統(tǒng)的相關(guān)資料展開(kāi)對(duì)Vue2?深度響應(yīng)的介紹，需要的小伙伴可以參考一下2022-04-04
electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開(kāi)發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本
這篇文章主要介紹了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本的跨域請(qǐng)求封裝問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的計(jì)算器功能,結(jié)合完整實(shí)例形式分析了vue.js響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)基本的數(shù)值運(yùn)算相關(guān)操作技巧,可實(shí)現(xiàn)四則運(yùn)算及乘方、開(kāi)方等功能,需要的朋友可以參考下2018-07-07
vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
同時(shí)Vue也支持讓開(kāi)發(fā)者,自己注冊(cè)一些指令,這些指令被稱為自定義指令,每個(gè)指令都有自己各自獨(dú)立的功能,這篇文章主要介紹了Vue自定義指令簡(jiǎn)介和基本使用,需要的朋友可以參考2024-03-03