vue跳轉外部鏈接的實現(xiàn)方法
更新時間：2025年06月11日 10:53:55 作者：jieyucx
這篇文章主要介紹了vue跳轉外部鏈接的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
有些時候我們需要從我們的vue項目中跳轉到第三方的鏈接。
坑1不能用路由跳
這時用vue的路由跳轉肯定是不行的，因為vue的路由跳轉只是自己項目內部的跳轉，當要跳轉到第三方鏈接時，比如跳轉到百度"www.baidu.com"，這已經跳出vue項目了所以不能用路由跳，應該用window.location.href或者.window.open(a,b) a:外部鏈接 ,b：打開方式（“_blank”新開一個窗口；“_self”覆蓋當前窗口）方式跳轉。
坑2不能直接window.location.href跳
但是當我們用window.location.href這樣直接打開時會出現(xiàn)一個很大的問題：
- “我們打開的外部鏈接會自動拼接我們的源地址，導致網址鏈接不正確，無法正常訪問”
- 比如：
window.location.href='www.baidu.com' - 這時跳轉過去的地址會是這樣的：
http://localhost:8080/#/www.baidu.com從而導致跳轉失敗
解決辦法1
let url = 'www.baidu.com' // 這里的地址前面就不用加協(xié)議了'http:// 或者 https://' 下面一句話就是處理這個的。 let path = window.location.protocol + "http://" + url window.location.href = path
封裝方法
// 點擊方法 url為傳入的第三方鏈接或網址 如'www.baidu.com' url前面不要加協(xié)議哦！
jumpUrl(url){
let path=window.location.protocol+'//'+url
window.location.href=path
},解決辦法2
window.open(url, target)
- url : 要跳轉的網址 如： http://www.baidu.com
- target: 跳轉方式，‘_blank’:在新的窗口打開；‘_self’:在當前頁面打開
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中watch監(jiān)聽器用法之deep、immediate、flush
Vue是可以監(jiān)聽到多層級數(shù)據改變的,且可以在頁面上做出對應展示,下面這篇文章主要給大家介紹了關于vue中watch監(jiān)聽器用法之deep、immediate、flush的相關資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)無限消息無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue.config.js?是一個可選的配置文件,如果項目的?(和?package.json?同級的)?根目錄中存在這個文件,那么它會被?@vue/cli-service?自動加載,這篇文章主要介紹了vue項目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了使用Vue?3和Element-plus搭建前端項目的過程,包括項目搭建、Element-plus安裝和引入、axios安裝、sass使用、app.vue配置、組件創(chuàng)新、路由配置以及使用輔助插件來提高開發(fā)效率,需要的朋友可以參考下2025-02-02
我在做一個附件刪除功能的時候發(fā)現(xiàn),明明打印出來附件已經沒有數(shù)據了但是頁面就是不刷新, this.$set()不生效,所以本文小編給大家介紹了vue中this.$set()不更新的解決方法,需要的朋友可以參考下2023-11-11
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實例化的組件）,這篇文章主要給大家介紹了關于Vue.js函數(shù)式組件的相關資料,需要的朋友可以參考下2021-10-10
作為Web Storage API的接口,Storage 提供了訪問特定域名下的會話存儲或本地存儲的功能,例如可以添加、修改或刪除存儲的數(shù)據項,這篇文章主要給大家介紹了關于如何使用Vue的思想封裝一個Storage的相關資料,需要的朋友可以參考下2021-08-08
vue中?根據判斷條件添加一個或多個style及class的寫法小結
這篇文章主要介紹了vue中?根據判斷條件添加一個或多個style及class的寫法,文中給大家補充介紹了關于vue里:class的使用結合自己的實現(xiàn)給大家講解，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vuex的屬性和作用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家詳細介紹了使用vue構建一個上傳圖片表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07