在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项目中跳转到外部链接的实例讲解到此结束,希望能为读者提供参考。