快捷導(dǎo)航

Vue在原窗口與新窗口打開(kāi)外部鏈接的實(shí)現(xiàn)代碼

更新時(shí)間：2023年02月02日 11:13:03 作者：小迷糊MJ

這篇文章主要介紹了Vue如何在原窗口與新窗口打開(kāi)外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: