Vue路由器链接外部网站

Question

请帮忙。我有带有一堆 url 链接的 JSON 文件。有些是内部的，有些是外部的。

JSON 看起来像这样。

[
 {stuff..., "Url":"https://www.google.com/", stuff..},
 {stuff..., "Url":"/internal-link", stuff..}
]

vue 代码是这样的。

<div class="mobile-link" v-for="link in json" :key="link.id">
  <router-link :to="link.Url">{{link.Name}}</router-link>
</div>

当内部链接传递给<router-link>时可以，但是当传递外部链接时，它不会重定向到外部网站。

区分外部链接并以某种方式通过<router-link> 传递并重定向的最佳方法是什么？

我想将这些链接保存在一个 JSON 中。

感谢您的回答

Answer 1

如您的 JSON 所示，您可以使用正则表达式来确定 URL 是本地的还是外部的。

所以，像

<a v-if="/https?:\/\//.test(link.Url)" href="link.Url"></a>
<router-link v-else :to="link.Url">{{link.Name}}</router-link>

Ofc，创建一个封装这个条件的组件会更干净。 :D

这是一篇关于如何实现它的有趣博客文章。它是在谈论 Nuxt.js，但如果你只想要它用于 Vue，它基本上是相同的。
https://lihbr.com/blog/one-link-component-to-rule-them-all

Answer 2

你可以这样做：

[
 {stuff..., "URL":"https://www.google.com/", "external" : true},
 {stuff..., "URL":"/internal-link", "external": false}
]

然后在vue组件中

<div class="mobile-link" v-for="link in json" :key="link.id">
<a v-if="link.external" :href="link.url">{{ link.Name }]</a>
<router-link v-else :to="link.Url">{{link.Name}}</router-link>
</div>

如果您无法直接编辑阵列，请使用 map function 和正则表达式 ^(http|https)://。