VueJS :href 将外部链接解释为内部链接

Question

我正在使用 VueJS 和 Vuetify。当使用 :href 将 link 传递给锚点时，它会将其解释为外部 link。例如： www.example.com 将我带到 localhost/www.example.com，但 https://www.example.com 将我带到 www.example.com。

这是我的代码：

<a :href="link.link" target="_blank">
    {{ link.text }}
</a>

Answer 1

您需要确保您的网址是完整的而不是相对的。

如果他们缺少方案（例如 https://），他们将被解释为相对 link。

你没有在准备 links 数组的地方显示代码，所以通常你可以迭代它们来解决这个问题，或者如果你已经在代码中构建数组，你可能想要在此处添加。

let linksArr = //...
for (const linkObj of linksArr) {
 linkObj.link = linkObj.link.startsWith('http://') || linkObj.link.startsWith('https://') ?
    linkObj.link : `https://${linkObj.link}`;
}

// or

linksArr = linksArr.map((linkObj) => {
  return {
    ...linkObj,
    link: linkObj.link.startsWith('http://') || linkObj.link.startsWith('https://') ?
      linkObj.link : `https://${linkObj.link}`
  };
});

VueJS :href 将外部链接解释为内部链接

VueJS :href interprets external links as internal links

javascript

vue.js

vuetify.js