[英]Vue.js open link in new window
我在Vue.js代码中
<div class="footer-items">
<span v-for="link in links" :key="link.name">
<a :href="link.Link" class="tertiary--text footer-links">{{ link.name }}</a>
</span>
</div>
这为我提供了一些链接的页脚。 我想让其中一些链接打开外部窗口或标签。
它从中加载的数组是:
data: () => ({
links: [
{ name: "Home", Link: "/dashboard" }, // needs to open same page
{ name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed" } // needs new window
]
这有效,但它在同一窗口中打开,我尝试过:
{ name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/,_blank" }, // error page
{ name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/','_blank" }, // open same page
{ name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/"','"_blank" }, // won't compile
Link: "https://www.ncbi.nlm.nih.gov/pubmed/ target=_blank" // opens same window
是否可以以编程方式将其发送到href。 我无法更改href,因为并非所有页面都需要在新窗口中打开。
我将代码更改为:
<a :href="link.Link" target="link.place" class="tertiary--text
footer-links">{{ link.name }}</a>
并在数组中添加一个位置:
{ name: "Home", Link: "/dashboard", place: "_self" },
{name: "PubMed", Link: "https://www.ncbi.nlm.nih.gov/pubmed/",
place: "_blank"
},
它们都在新窗口中打开。 感谢所有帮助。
试试这个( jsfiddle ):
// Script
links: [
{ name: "Home", href: "/dashboard", target: "_self" },
{ name: "Google", href: "https://www.google.com/", target: "_blank" },
]
// Template
<a
v-for="link in links"
:key="link.name"
:href="link.href"
:target="link.target"
rel="noopener noreferrer">
{{ link.name }}
</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.