Vue项目中实现外部链接跳转的正确方法
作者:小布丁时间:2026-10-22 17:57:46浏览:340
在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项目中跳转到外部链接的实例讲解到此结束,希望能为读者提供参考。
作者最新文章
前端大屏自适应方案:缩放与视口单位对比
2026-10-31 18:19:27
前端大文件分片下载实现:基于localForage与Vue的完整方案
2026-10-31 16:11:47
Vue3 中使用 VueUse 实现指定区域全屏阅读功能
2026-10-31 13:55:05
基于Vue与Pinia实现页面Loading动画及请求拦截处理
2026-10-31 13:54:42
Vue封装Echarts通用组件:Vue2/Vue3 JS/TS三种模板及常用配置事件详解
2026-10-31 11:38:03
