Vue项目中实现外部链接跳转的正确方法

作者:小布丁

时间:2026-10-22

浏览:339

在Vue项目中,直接使用router.push跳转外部链接会因拼接本地域名导致报错。本文介绍通过监听点击事件,利用window.location.href属性直接赋值目标URL的方式,实现正确的外部页面跳转,避免路由冲突。

文章目录

Vue外部链接跳转问题与解决方案

在Vue单页应用中,页面内部路由跳转通常使用this.$router.push()方法。然而,若尝试使用该方式跳转外部链接,程序会报错。错误原因通常是因为外部链接被错误地拼接了本地开发服务器的前缀(如http://localhost:8080/#/),导致路径解析失败。要正确跳转到外部链接,应使用window.location.href属性直接赋值目标URL。具体实现方式如下:


 <span @click="See(item.qj_url)">360全景看房</span>

上述代码展示了通过点击事件触发跳转的逻辑。其中,item.qj_url变量存储了需要跳转的外部URL地址,该值被传递给See函数执行。


 See (e) {
  window.location.href = e
  }
 }

至此,Vue项目中外部链接跳转的实现方法介绍完毕。

以上关于Vue项目中跳转到外部链接的实例讲解到此结束,希望能为读者提供参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章