Vue跳转外部链接始终有localhost问题怎么解决

在使用Vue.js开发项目时，我们经常会遇到需要跳转到外部链接的场景。然而，有时候我们会发现，即使我们明确指定了外部链接的完整URL，跳转时仍然会在URL前面加上localhost，导致跳转失败。本文将探讨这个问题的原因，并提供几种解决方案。

问题描述

假设我们在Vue组件中使用<a>标签或window.location.href来跳转到一个外部链接，代码如下：

<a href="https://www.example.com">跳转到外部链接</a>

或者

window.location.href = "https://www.example.com";

然而，当我们点击链接或执行跳转时，浏览器地址栏显示的却是http://localhost:8080/https://www.example.com，导致跳转失败。

问题原因

这个问题的根本原因在于Vue的路由配置。Vue Router默认会将所有的路由请求都拦截下来，并尝试在本地路由中匹配。如果匹配不到，Vue Router会将路径拼接到当前的基础URL（通常是localhost）后面，从而导致跳转失败。

解决方案

1. 使用<a>标签的target属性

最简单的解决方案是使用<a>标签的target属性，将链接设置为在新标签页中打开。这样可以避免Vue Router的拦截：

<a href="https://www.example.com" target="_blank">跳转到外部链接</a>

2. 使用window.open方法

如果你希望在当前页面跳转，可以使用window.open方法，并指定_self参数：

window.open("https://www.example.com", "_self");

3. 使用Vue Router的beforeEach钩子

如果你希望在Vue Router中处理外部链接的跳转，可以使用beforeEach钩子来拦截路由，并手动处理外部链接：

router.beforeEach((to, from, next) => {
  if (to.path.startsWith("http://") || to.path.startsWith("https://")) {
    window.location.href = to.path;
  } else {
    next();
  }
});

4. 使用<router-link>的tag属性

如果你使用的是<router-link>组件，可以通过设置tag属性为a，并手动指定href属性来跳转到外部链接：

<router-link tag="a" href="https://www.example.com" target="_blank">跳转到外部链接</router-link>

5. 使用<a>标签的rel属性

为了防止安全漏洞，建议在使用<a>标签跳转到外部链接时，添加rel="noopener noreferrer"属性：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">跳转到外部链接</a>

总结

Vue跳转外部链接时出现localhost的问题，通常是由于Vue Router的路由拦截机制导致的。通过使用<a>标签的target属性、window.open方法、Vue Router的beforeEach钩子等方法，可以有效地解决这个问题。在实际开发中，根据具体需求选择合适的解决方案，可以避免不必要的麻烦。

希望本文能帮助你解决Vue跳转外部链接时遇到的问题。如果你有其他更好的解决方案，欢迎在评论区分享！