如果放置在路由器链接内，有什么方法可以使锚标记可点击？

Question

我有这个组件：

<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>

我想让anchor标记可点击，以便它打开 URL https://www.facebook.com 。

我尝试使用z-index优先提升它，但它似乎不起作用：

<style scoped lang="scss">
.news {
  .news-card {
    position: relative;
    z-index: 1;
    a {
      position: relative;
      z-index: 2;
      &:hover {
        color: red;
      }
    }
  }
}
</style>

anchor上的 hover 效果有效，但href属性无效。 知道怎么做吗？

Answer 1

router-link基本上是一个a标签，所以你基本上在a标签内有一个a标签。 我假设当点击www.facebook.com时，它会将您带到{ name: 'news-article' }而不是 facebook。

这就是你想做的我猜..

<template>
  <div id="news" class="news page">
    <router-link class="news-card" to="https://www.facebook.com">
         www.facebook.com
    </router-link>
  </div>
</template>