快捷導(dǎo)航

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

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

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

Vue如何在原窗口與新窗口打開外部鏈接

Vue項目中如果是頁面中的內(nèi)部跳轉(zhuǎn)，可以用this.$router.repalce()實現(xiàn)，如果我們用同樣的方法跳轉(zhuǎn)外部鏈接，我們的外部鏈接前面追加了? ?http://localhost:8080/#/??導(dǎo)致跳轉(zhuǎn)出現(xiàn)問題，那么我們?nèi)绾翁D(zhuǎn)到外部鏈接呢？跳轉(zhuǎn)鏈接分為原窗口新窗口打開外部鏈接，具體講解如下：

HTML部分：

<div class="fotterRightTextOne" @click="jump">Vue跳轉(zhuǎn)外鏈接</div>

以下是Js部分

1、首先講解原窗口打開外部鏈接，如果我們想要達(dá)到跳轉(zhuǎn)后可以返回原頁面可以使用此方法，接下來分別使用兩種方法實現(xiàn)：

(1) 使用location.href =""實現(xiàn)原窗口跳轉(zhuǎn)

jump() {
? ?location. rel="external nofollow" 

}

（2）使用window.open(url ,‘_self’), _self屬性表示在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁

jump() {
? ? window.open('https://www.baidu.com/', '_self')

}

2、如果想要實現(xiàn)在新窗口打開外部鏈接，我們可以使用 window.open(url ,‘_blank’)，_blank屬性則表示在新窗口顯示目標(biāo)網(wǎng)頁

jump() {
? ?window.open('https://www.baidu.com/', '_blank')

}

總結(jié)

window.open本質(zhì)上可以看做<a>標(biāo)簽的js版本，或者說是編碼式地打開窗口，但它比<a>標(biāo)簽更加靈活，可以通過js實現(xiàn)與打開的頁面之間的通信。

補(bǔ)充：vue跳轉(zhuǎn)外部鏈接

vue跳轉(zhuǎn)外部鏈接

vue 跳轉(zhuǎn)外部鏈接問題,當(dāng)跳轉(zhuǎn)的時候會添加在當(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如何在原窗口與新窗口打開外部鏈接的文章就介紹到這了,更多相關(guān)Vue打開外部鏈接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: