[英]Any way to make an anchor tag clickable if it's placed inside router-link?
I have this component:我有这个组件:
<template>
<div id="news" class="news page">
<router-link class="news-card" :to="{ name: 'news-article'}">
<a :href="'https://www.facebook.com'">www.facebook.com</a>
</router-link>
</div>
</template>
and I want to make the anchor
tag clickable so that it opens the URL https://www.facebook.com
.我想让anchor
标记可点击,以便它打开 URL https://www.facebook.com
。
I've tried lifting it in priority with z-index
but it doesn't seem to work:我尝试使用z-index
优先提升它,但它似乎不起作用:
<style scoped lang="scss">
.news {
.news-card {
position: relative;
z-index: 1;
a {
position: relative;
z-index: 2;
&:hover {
color: red;
}
}
}
}
</style>
The hover effect on the anchor
works, but not the href
property. anchor
上的 hover 效果有效,但href
属性无效。 Any idea how to do that?知道怎么做吗?
router-link
is basically a a
tag, so you basically have an a
tag inside of an a
tag. router-link
基本上是一个a
标签,所以你基本上在a
标签内有一个a
标签。 I assume when clicking on www.facebook.com it would take you to { name: 'news-article' }
instead of facebook.我假设当点击www.facebook.com时,它会将您带到{ name: 'news-article' }
而不是 facebook。
This is what you wanna do I guess..这就是你想做的我猜..
<template>
<div id="news" class="news page">
<router-link class="news-card" to="https://www.facebook.com">
www.facebook.com
</router-link>
</div>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.