vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)方法

更新時(shí)間：2025年06月11日 10:53:55 作者：jieyucx

這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

坑1不能用路由跳

這時(shí)用vue的路由跳轉(zhuǎn)肯定是不行的，因?yàn)関ue的路由跳轉(zhuǎn)只是自己項(xiàng)目?jī)?nèi)部的跳轉(zhuǎn)，當(dāng)要跳轉(zhuǎn)到第三方鏈接時(shí)，比如跳轉(zhuǎn)到百度"www.baidu.com"，這已經(jīng)跳出vue項(xiàng)目了所以不能用路由跳，應(yīng)該用window.location.href或者.window.open(a,b) a:外部鏈接 ,b：打開(kāi)方式（“_blank”新開(kāi)一個(gè)窗口；“_self”覆蓋當(dāng)前窗口）方式跳轉(zhuǎn)。

坑2不能直接window.location.href跳

但是當(dāng)我們用window.location.href這樣直接打開(kāi)時(shí)會(huì)出現(xiàn)一個(gè)很大的問(wèn)題：

“我們打開(kāi)的外部鏈接會(huì)自動(dòng)拼接我們的源地址，導(dǎo)致網(wǎng)址鏈接不正確，無(wú)法正常訪問(wèn)”
比如：window.location.href='www.baidu.com'
這時(shí)跳轉(zhuǎn)過(guò)去的地址會(huì)是這樣的：http://localhost:8080/#/www.baidu.com從而導(dǎo)致跳轉(zhuǎn)失敗

解決辦法1

let url = 'www.baidu.com' // 這里的地址前面就不用加協(xié)議了'http:// 或者 https://' 下面一句話(huà)就是處理這個(gè)的。

let path = window.location.protocol +  "http://" + url

window.location.href = path

封裝方法

// 點(diǎn)擊方法 url為傳入的第三方鏈接或網(wǎng)址 如'www.baidu.com' url前面不要加協(xié)議哦！
jumpUrl(url){
  let path=window.location.protocol+'//'+url
  window.location.href=path
},

解決辦法2

window.open(url, target)

url : 要跳轉(zhuǎn)的網(wǎng)址如： http://www.baidu.com
target: 跳轉(zhuǎn)方式，‘_blank’:在新的窗口打開(kāi)；‘_self’:在當(dāng)前頁(yè)面打開(kāi)

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue上傳解析excel文件并在列表中輸出內(nèi)容
在vue的項(xiàng)目開(kāi)發(fā)中,我們會(huì)遇到加載excel或者csv等情形,這個(gè)示例展示了這個(gè)需求,上傳一個(gè)excel文件,通過(guò)解析,生成數(shù)組,然后再列表中將內(nèi)容展示出來(lái),這篇文章主要介紹了vue上傳解析excel文件,列表中輸出內(nèi)容,需要的朋友可以參考下,
2023-09-09
vue2.0使用md-edit編輯器的過(guò)程
這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2024-02-02
Vue Element前端應(yīng)用開(kāi)發(fā)之常規(guī)Element界面組件
在我們開(kāi)發(fā)BS頁(yè)面的時(shí)候，往往需要了解常規(guī)界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對(duì)話(huà)框、表單處理、條碼二維碼等等，本篇隨筆基于普通表格業(yè)務(wù)的展示錄入的場(chǎng)景介紹這些常規(guī)Element組件的使用
2021-05-05
vue和react的區(qū)別及優(yōu)缺點(diǎn)解讀
這篇文章主要介紹了vue和react的區(qū)別及優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue修改Element的el-table樣式的4種方法
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-09-09
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
vue設(shè)置頁(yè)面背景及背景圖片簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁(yè)面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開(kāi)發(fā)中我們經(jīng)常要向頁(yè)面中添加背景圖片,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue3+ts中ref與reactive指定類(lèi)型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類(lèi)型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
Vue中的事件綁定與解綁方式
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue狀態(tài)管理庫(kù)Vuex的入門(mén)使用教程
Vuex是一個(gè)專(zhuān)門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理庫(kù)。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易
2023-03-03