vue跳转外部链接的实现方法
更新时间：2025年06月11日 10:53:55 作者：jieyucx
这篇文章主要介绍了vue跳转外部链接的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
有些时候我们需要从我们的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这样直接打开时会出现一个很大的问题：
- “我们打开的外部链接会自动拼接我们的源地址，导致网址链接不正确，无法正常访问”
- 比如：
window.location.href='www.baidu.com' - 这时跳转过去的地址会是这样的：
http://localhost:8080/#/www.baidu.com从而导致跳转失败
解决办法1
let url = 'www.baidu.com' // 这里的地址前面就不用加协议了'http:// 或者 https://' 下面一句话就是处理这个的。 let path = window.location.protocol + "//" + url window.location.href = path
封装方法
// 点击方法 url为传入的第三方链接或网址 如'www.baidu.com' url前面不要加协议哦！
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的项目开发中,我们会遇到加载excel或者csv等情形,这个示例展示了这个需求,上传一个excel文件,通过解析,生成数组,然后再列表中将内容展示出来,这篇文章主要介绍了vue上传解析excel文件,列表中输出内容,需要的朋友可以参考下,2023-09-09
这篇文章主要介绍了vue2.0+使用md-edit编辑器的解决方案，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2024-02-02
Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05
这篇文章主要介绍了vue和react的区别及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了Vue中的路由跳转及传参的多种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要给大家介绍了关于vue设置页面背景及背景图片的相关资料,在Vue项目开发中我们经常要向页面中添加背景图片,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了Vue中的事件绑定与解绑方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构，将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易2023-03-03
最新评论