vue跳转外部链接的实现方法

更新时间：2025年06月11日 10:53:55 作者：jieyucx

这篇文章主要介绍了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中watch监听器用法之deep、immediate、flush
Vue是可以监听到多层级数据改变的,且可以在页面上做出对应展示,下面这篇文章主要给大家介绍了关于vue中watch监听器用法之deep、immediate、flush的相关资料,需要的朋友可以参考下
2022-09-09
vue实现无限消息无缝滚动
这篇文章主要为大家详细介绍了vue实现无限消息无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue项目中vue.config.js文件详解
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载,这篇文章主要介绍了vue项目中vue.config.js文件的介绍,需要的朋友可以参考下
2024-02-02
前端vue3搭建超详细指南(快速上手搭建)
这篇文章主要介绍了使用Vue 3和Element-plus搭建前端项目的过程,包括项目搭建、Element-plus安装和引入、axios安装、sass使用、app.vue配置、组件创新、路由配置以及使用辅助插件来提高开发效率,需要的朋友可以参考下
2025-02-02
解决vue中this.$set()不更新问题
我在做一个附件删除功能的时候发现,明明打印出来附件已经没有数据了但是页面就是不刷新, this.$set()不生效,所以本文小编给大家介绍了vue中this.$set()不更新的解决方法,需要的朋友可以参考下
2023-11-11
Vue.js函数式组件的全面了解
函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）,这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
2021-10-10
如何使用Vue的思想封装一个Storage
作为Web Storage API的接口,Storage 提供了访问特定域名下的会话存储或本地存储的功能,例如可以添加、修改或删除存储的数据项,这篇文章主要给大家介绍了关于如何使用Vue的思想封装一个Storage的相关资料,需要的朋友可以参考下
2021-08-08
vue中根据判断条件添加一个或多个style及class的写法小结
这篇文章主要介绍了vue中根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解，需要的朋友可以参考下
2023-03-03
详解Vuex的属性和作用
这篇文章主要为大家介绍了Vuex的属性和作用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
使用vue构建一个上传图片表单
这篇文章主要为大家详细介绍了使用vue构建一个上传图片表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07