Vue.js应用程序在新页面的下拉菜单中打开url链接

Question

我的代码是

<div class="md-list-item-content">
<drop-down direction="down">
<md-button
slot="title"
class="md-button md-button-link md-white md-simple dropdown-toggle"
data-toggle="dropdown">
<i class="material-icons">view_day</i>
<p>Links</p>
</md-button>
<ul class="dropdown-menu dropdown-with-icons">
<li
v-for="li in linksExternal"
:key="li.name">
<a :href="li.href" >
<i class="material-icons">{{ li.icon }}</i>                            
</a>
</li>
</ul>
</drop-down>
</div>

我的脚本代码是

linksExternal: [
{ name: "NCI Dictionary",  href: "https://www.cancer.gov/publications/dictionaries/cancer-terms target='_blank'" , icon: "dns" }
]

我曾尝试在不同的位置添加target='_blank'，例如在HTML中的标记位置，但它仍然总是在同一个选项卡中打开，或者我的语法可能不正确。有人能给我指正确的方向吗？这是Vue特定的项目，还是我应该用一个调用window.open的函数以不同的方式来做？如果可以的话，我会尽量采用Vue的最佳实践方法。这应该是一个简单的解决方案，但我还没有找到解决方案。

Answer 1

您的代码需要更改一点：

href: "https://www.cancer.gov/publications/dictionaries/cancer-terms target='_blank'"

注意，target='_blank'、target是a元素的属性，而不是URL 的一部分

所以数据需要更改为这样的内容：

linksExternal: [
{ name: "NCI Dictionary",  href: "https://www.cancer.gov/publications/dictionaries/cancer-terms", target="_blank", icon: "dns" }
]

以及模板：

...
<li v-for="li in linksExternal" :key="li.name">
<a :href="li.href" :target="li.target">
<i class="material-icons">{{ li.icon }}</i>
</a>
</li>
...

或者简单地说，如果所有链接都需要在新的选项卡中打开：

...
<li v-for="li in linksExternal" :key="li.name">
<a :href="li.href" target="_blank">
<i class="material-icons">{{ li.icon }}</i>
</a>
</li>
...

Answer 2

尝试在内部使用target="_blank"

<a :href="li.href" target="_blank"> <i class="material-icons">{{ li.icon }}</i> </a>

Answer 3

我不太确定标记的其余部分，但我建议您从linksExternal对象中删除目标部分，并将其放在<a>元素中，如下所示

<a :href="li.href" target="_blank">Cool link that opens in another page</a>