如何在 nuxt-link 中添加 href？答案

【问题标题】：how add a href inside nuxt-link?如何在 nuxt-link 中添加 href？
【发布时间】：2019-10-08 08:17:19
【问题描述】：

我有很多这样的卡片

<nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
  <a :href="card.link>Go to href</a>
</nuxt-link>

点击带有 nuxt-link 的卡片应该会打开带有卡片详细信息的页面

点击href应该打开外部网站

但是当我点击 a-href 它的开放细节并忽略 a-href

尝试对 nuxt-link 使用一些标签，但没有帮助

【问题讨论】：

将标签放在之外。
<nuxt-link> 呈现为 <a> 并且您不应该将 <a> 元素放在另一个 <a> 元素中。
您不能在锚链接中创建锚链接。结束。
但我需要卡片内的外部链接，点击卡片应该打开详细卡片

标签： vue.js vue-router nuxt.js

【解决方案1】：

这是@ArlanT 答案的扩展

它添加了<slot/>，因此您可以按如下方式在外部使用它。

<hyper-link class="anyClass" :url="myCustomUrl" @click.native="">Here lies my html</hyper-link>

<template>
  <component
    v-bind="linkProps(url)"
    :is="'hyperLink'"
  >
  <slot/>
  </component>
</template>

<script>
export default {
    props:['url'],
    name:'hyperLink',
    methods: {
    linkProps (path) {
      if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') {
        return {
          is: 'a',
          href: path,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        is: 'nuxt-link',
        to: path
      }
    }
  }
};
</script>

<style>
</style>

【讨论】：

【解决方案2】：

如果您在<a> 中单击<a>（这正是<nuxt-link> 生成的内容），您实际上是在向这两个元素发送点击事件。这不是一个好习惯（甚至用 js 停止传播）。只是不要嵌套它

如果它必须在“卡片”的顶部，也许用 css 绝对定位它。

尝试类似：

<div class="card">
  <nuxt-link  :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
    {{ card.content }}
  </nuxt-link>
  <a class="card__cta" :href="card.link>Go to href</a>
</div>

和

.card {
  position: relative;
}

.card__cta {
  position: absolute;
  bottom: 24px; // depending where you need it, maybe you need top property
  right: 24px; // depending where you need it, maybe you need left property
}

【讨论】：

【解决方案3】：

目前这似乎对我有用

在父组件中

 <template>
  <ul 
    v-if="loadedTertiaryMenu"  
    class="nav justify-content-end"
  >
    <li 
      v-for="item in loadedTertiaryMenu"
      :key="item.id"
      class="nav-item"
    >
      <NavLink
        :attributes="item"
      />
    </li>
  </ul>  
</template>

<script>
import NavLink from '@/components/Navigation/NavLink'

export default {
  name: 'TheNavigationTertiary',
  computed: {
    loadedTertiaryMenu() {
      return this.$store.getters.loadedTertiaryMenu
    }
  },
  components: {
    NavLink
  }
}
</script>

<style scoped lang="scss">

</style>

在子组件中

<template>
  <component
    v-bind="linkProps(attributes.path)"
    :is="NavLink"
    :title="attributes.title"
    :class="[ attributes.cssClasses ]"
    class="nav-link active"
    aria-current="page"
  >
  {{ attributes.label }}
  </component>
</template>

<script>
export default {
  name: 'NavLink',
  props: {
    attributes: {
      type: Object,
      required: true
    }
  },
  methods: {
    linkProps (path) {
      if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') {
        return {
          is: 'a',
          href: path,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        is: 'nuxt-link',
        to: path
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>

【讨论】：